If your data is an array, your original code will work, if you get rid of the brackets around data: var data = [32710,20280,18002]; console.log(data); console.log(d3.min(data)); console.log(d3.max(data)); If you need to identify the array values with the keys “01”,”02″, “03”, create an array of objects, and operate on the values to get min/max: //data as … Read more
I’m just going to leave this here since people are likely to end up on this question. Here are the different ways you can easily manipulate a D3 axis. Without any ticks or tick labels: d3.svg.axis().tickValues([]); No line or text elements are created this way. Without ticks and with tick labels: d3.svg.axis().tickSize(0); The line elements … Read more
The problem is not to render them. You could switch to canvas or webgl for the rendering part. You can find some examples of using canvas and X3DOM with D3 data-binding. But it will be slow because of the number of DOM objects, so it’s better to keep them separated, as in this parallel coordinates … Read more
One of these two should do it for you. Just specify axis.ticks(10) to specify the number of tick marks or axis.tickValues([1,2,4]) to specify the actual tick marks that should appear. Since you are using dates, you’ll need to do something like this: .ticks(d3.time.weeks, 2) You can read more about time intervals at https://github.com/mbostock/d3/wiki/Time-Intervals. You can … Read more
The proper solution is to retrieve ticks using .ticks() method, filter them to keep only integers and pass them to .tickValues(): const yAxisTicks = yScale.ticks() .filter(tick => Number.isInteger(tick)); const yAxis = d3.axisLeft(yScale) .tickValues(yAxisTicks) .tickFormat(d3.format(‘d’)); For completeness here is explanation why other solutions are bad: @BoomShakalaka solution uses .tickSubdivide() method, which no longer exists. @cssndrx and … Read more
Just use d3.selectAll(data).size().Hope this example help you: var matrix = [ [11975, 5871, 8916, 2868], [ 1951, 10048, 2060, 6171], [ 8010, 16145, 8090, 8045], [ 1013, 990, 940, 6907] ]; var tr = d3.select(“body”).append(“table”).selectAll(“tr”) .data(matrix) .enter().append(“tr”); var td = tr.selectAll(“td”) .data(function(d) { return d; }) .enter().append(“td”) .text(function(d) { return d; }); var tdSize=tr.selectAll(“td”).size(); Complete … Read more
The most natural way to manipulate just one element is using the filter function: var data = [[0,0,2],[0,23,5],[2,12,5]]; var circleSet = svg.selectAll() .data(data) .enter() .append(‘circle’); var filteredCircleSet = circleSet .filter(function (d, i) { return i === 1;}) // put all your operations on the second element, e.g. .append(‘h1’).text(‘foo’); Note that depending on what you do … Read more
I think the documentation gives a good answer to this question: https://github.com/mbostock/d3/wiki/Selections#wiki-datum. Basically, the point is that in some cases you are not interested in the enter/exit sets when you do a selection. If this is the case, which often seems to be the case for the full chart, you use datum. Update: It depends: … Read more
In a selection method (such as attr) : this.getComputedTextLength(). In a selection of one element, you can say selection.node().getComputedTextLength(). You can also use getBBox for the width and height
⚠ Solution proposed here depends on two libraries marked as unsupported by their authors. To get Graphviz DOT files rendered in Javascript, combine the graphlib-dot and dagre-d3 libraries. The graphlibDot.read() method takes a graph or digraph definition in DOT syntax and produces a graph object. The dagreD3.render() method can then output this graph object to … Read more