d3.js

问题 I'm doing some tests with d3.js regarding zooming. At the moment, I have successfully implemented geometric zoom in my test, but it has a drawback: the elements under the zoomed g are being scaled. As I understood it, this could be solved by using semantic zooming. The problem is that I need scale in my test, as I'm syncing it with a jQuery.UI slider value . On the other hand, I would like the text elements being resized to maintain their size after a zoom operation. I have an example of my

问题 I have two arrays of strings: these two arrays contain the labels that are to be inserted on the x and y axis (these labels will be those of a heatmap). nutsNames corresponds to the x axis (left to right) and the yearsNames corresponds to the y axis (top to bottom). As the data may vary, I would like to create a way that fits the data. So the problem is the positioning of the elements on the axes and the svg size. What I would like to get is something like this: The image shows two examples

问题 I'm having a strange issue with IE11. I have a bubble chart done with d3 and with certain transitions. The bubbles are defined as: <svg> <g...> <circle ...> <text> <image> <path> <line> <text> </g> </svg> exactly as: <g class="main-dimension" id="dimension-76" indicator="76" name="Security Alerts" pos-x="184" pos-y="216" original-r="176" transform="translate(184,216)"> <circle class="main-dimension-circle start" r="176"></circle> <text class="main-dimension-title" dy="-74.8" style="font-size:

问题 I have a stacked bar chart. And I'd like a draw a line like grouping few bars of a stacked bar chart. Something like this. So to do this I need to find the y coordinate of the 2nd and the last bar. Some one please help in drawing those line using d3. JS: var width = 750, height = 500; var x = d3.scale.ordinal() .rangeRoundBands([0, width], .1); var y = d3.scale.linear() .rangeRound([height, 0]); var color = d3.scale.ordinal() .range(["#D70B16", "#154CEF", "#1A8A55"]); var xAxis = d3.svg.axis(

问题 I need to populate a 2d array, e.g., var dataset = [[1,3,3,5,6,7],[3,5,8,3,2,6],[9,0,6,3,6,3],[3,4,4,5,6,8],[3,4,5,2,1,8]]; Where the information comes from external sources, while I have the control in the format to store them (csv,json etc., to be read by functions like d3.csv , d3.json etc.). What are the simplest ways to store 2d array in external files, and to read in to populate the variable like dataset when doing d3 processing? 回答1: You can do it using a CSV file, a TSV file, a XML

问题 I've been grappling with issues relating to transitions in D3. Consider this code: svg.selectAll("path") .data(data, key) .enter().append("path") .attr("d", someFunctionThatReturnsAPath); }); And I call the following in a setTimeout a few seconds later: svg.selectAll("path") .transition() .duration(2000) .attr("d", someFunctionThatReturnsADifferentPath); }); The second call correctly updates the paths but doesn't animate the transition. Why is there no transition when the d attribute is

问题 The problem: The number of groups is dynamic, and vertical line (separator) needs dynamic padding. Group width im getting with x0.rangeBand() . Is there any way to get width of space beetween two groups dynamically? Peace of code: ..... var slice = svg.selectAll(".chart") .data(data) .enter().append("g") .attr("class", "g") .attr("transform", function (d) { return "translate(" + x0(d.category) + ",0)"; }); // Create rectangles of the correct width slice.selectAll("rect") .data(function (d) {

问题 So was trying to create a simple bar graph. Was playing around with the axis and wanted to draw gridlines behind the bar graph. The bar graph and gridlines are drawn, but gridlines are coming over the bars. JS : var dataArray = [6,7,7.2,7.7,7.7,9.5,11.7,10.5,10.1]; var margin = {top: 80, right: 40, bottom: 0, left: 5}; var y = d3.scaleLinear() .domain([0,12]) .range([300,0]); var ticks = [0,2,4,6,8,10,12]; var gridlines = d3.axisLeft(y) .tickValues(ticks) .tickSize(-innerWidth); var yAxis =

问题 I am attempting to add a simply bar chart to my tooltip; it consists of 2 variables -- men and women. I was hoping someone might be able to help me put this inside of the tooltip instead of appending it to where it is currently being appended. I've given this a particular area to be appended just so that I know that it is, in fact, showing up(which it is), but I don't know how to get it into the tool tip. Any help is much appreciated. Oh, and this needs to be done in d3, which is partial to

问题 I am quite new to D3 and will really appreciate some help. I am trying to modify this force collapsible layout https://bitbucket.org/kolbyjAFK/d3/src/f87f85b9c6e2/examples/force/force-collapsible.html The data it loads is in single json file https://bitbucket.org/kolbyjAFK/d3/src/f87f85b9c6e236f20dec8151ae11438950aaf967/examples/data/flare.json?at=fix-interpolate-hsl But what if i have a data which i dont want to load in a go. I want to call the children only when the user clicks on a