d3.js

Show values on top of bars in a barChart

Check updated jsfiddle .renderlet(function(chart){ var barsData = []; var bars = chart.selectAll(‘.bar’).each(function(d) { barsData.push(d); }); //Remove old values (if found) d3.select(bars[0][0].parentNode).select(‘#inline-labels’).remove(); //Create group for labels var gLabels = d3.select(bars[0][0].parentNode).append(‘g’).attr(‘id’,’inline-labels’); for (var i = bars[0].length – 1; i >= 0; i–) { var b = bars[0][i]; //Only create label if bar height is tall enough if … Read more

D3: How do I set “click” event and “dbclick” event at the same time?

You have to do your “own” doubleclick detection Something like that could work: var clickedOnce = false; var timer; $(“#test”).bind(“click”, function(){ if (clickedOnce) { run_on_double_click(); } else { timer = setTimeout(function() { run_on_simple_click(parameter); }, 150); clickedOnce = true; } }); function run_on_simple_click(parameter) { alert(parameter); alert(“simpleclick”); clickedOnce = false; } function run_on_double_click() { clickedOnce = false; … Read more

draw text in d3 arc javascript

The trick to positioning text along a curve is to attach a text (and textpath) element to SVG and give it an xlink:href attribute that points to the ID of an arc. See below for an example. var svg = d3.select(“body”).append(“svg”), pi = Math.PI; var arc = d3.svg.arc() .innerRadius(150) .outerRadius(180) .startAngle(0) .endAngle(-pi/2) var path = … Read more

Major and minor ticks with V3 of D3?

The latest version doesn’t offer anything to draw minor ticks as explicitly as previous versions, but there’s no need to draw another axis to achieve what you want. You can use the scale to generate additional ticks and then use the familiar .data() pattern to draw lines for those for which no lines exist already. … Read more

d3 sankey charts – manually position node along x axis

This is possible. See this JSFiddle. The computeNodeBreadths function in sankey.js can be modified to look for an explicit x-position that has been assigned to a node (node.xPos): function computeNodeBreadths() { var remainingNodes = nodes, nextNodes, x = 0; while (remainingNodes.length) { nextNodes = []; remainingNodes.forEach(function(node) { if (node.xPos) node.x = node.xPos; else node.x = … Read more

Can’t make paths draw growing slowly with D3

A common pattern when animating lines in svg is setting a stroke-dasharray of the length of the path and then animate stroke-dashoffset: var totalLength = path.node().getTotalLength(); path .attr(“stroke-dasharray”, totalLength + ” ” + totalLength) .attr(“stroke-dashoffset”, totalLength) .transition() .duration(2000) .ease(“linear”) .attr(“stroke-dashoffset”, 0); You can see a demo here: http://bl.ocks.org/4063326