The underlying idea behind bisect is this: Consider the array that you mention – var data = [3, 6, 2, 7, 5, 4, 8] You want to insert a new value let’s say 3.5 into data array and want to know how would that ‘partition’ it. In other words, you want to know what would … Read more
You can use the tickFormat function on the axis object as below var xAxis = d3.svg.axis() .scale(x) .orient(“bottom”) .tickFormat(d3.time.format(“%H”)); The %H specifies hour (24-hour clock) as a decimal number [00,23]. Check this link D3 time formatting for more information You can check out a working example in this tributary 24hr time example
You cannot add multiple child elements within one chained command. You will need to save the parent selection in a variable. This should do what you want: var data = [{ “label”: “chocolate”, “text”: “Chocolate Cookie”, “img”: “https://stackoverflow.com/questions/13203897/chocolate.jpg” }, { “label”: “sugar”, “text”: “Sugar Cookie”, “img”: “sugar.jpg” }]; var diventer = d3.select(“body”).selectAll(“div”) .data(data) .enter().append(“div”) .attr(“id”, … Read more
You have to use an array. That will store x and y like: var coordinates= d3.mouse(this); var x = coordinates[0]; var y = coordinates[1]; // D3 v4 var x = d3.event.pageX – document.getElementById(<id-of-your-svg>).getBoundingClientRect().x + 10 var y = d3.event.pageY – document.getElementById(<id-of-your-svg>).getBoundingClientRect().y + 10
You can make the chart resize using a combination of viewBox and preserveAspectRatio attributes on the SVG element. See this jsfiddle for the full example: http://jsfiddle.net/BTfmH/12/ var svg = d3.select(‘.chart-container’).append(“svg”) .attr(“width”, ‘100%’) .attr(“height”, ‘100%’) .attr(‘viewBox’,’0 0 ‘+Math.min(width,height)+’ ‘+Math.min(width,height)) .attr(‘preserveAspectRatio’,’xMinYMin’) .append(“g”) .attr(“transform”, “translate(” + Math.min(width,height) / 2 + “,” + Math.min(width,height) / 2 + “)”); You … Read more
There are lots of examples showing how to add labels to graph and tree visualizations, but I’d probably start with this one as the simplest: http://bl.ocks.org/950642 You haven’t posted a link to your code, but I’m guessing that node refers to a selection of SVG circle elements. You can’t add text elements to circle elements … Read more
The idomatic way of doing is with nesting: var divs = d3.select(‘#parent’).selectAll(‘p’).data(data).enter().append(‘div’); divs.append(‘p’) divs.append(‘p’) Which creates: <div id=”parent”> <div> <p> from data[0] </p> <p> from data[0] </p> </div> <div> <p> from data[1] </p> <p> from data[1] </p> </div> <div> <p> from data[2] </p> <p> from data[2] </p> </div> </div> If that won’t work, save your … Read more
Use selection.empty(). Also, if the selection is empty, there’s no need to remove it.
I combined writing-mode and rotation: .rotated { writing-mode: tb-rl; transform: rotate(-180deg); } <div class=”rotated”>Text from bottom with working width/height</div> This works for me without bad width and height settings inside table cells. important 2020 edit: step 1) Look at https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode , ctrl/cmd-F for “Result”. This table will reflect your browser (which may have improper implementation). … Read more
In D3 4.x rangeRoundBands was moved to the new Band scale: d3.scaleBand() .range([range]) .round([round]); That’s equivalent to: d3.scaleBand() .rangeRound([range]); Here is the API: https://github.com/d3/d3-scale#band-scales