d3.js

问题 I am currently working on a stacked bar chart, and I'm having a problem with the axis labels. The labels look fine at first blush, but I noticed that there is not always a tick at the top of the Y axis. I've pasted a picture below. As you can see, there are no ticks above 120,000 even though there is a bar that clearly goes beyond that value. I realize that the axis is creating ticks at regular intervals, but is there a way to force the last tick value to be the max value of the scale? If not

问题 I am plotting some points using d3. I want to change the shape off all the points based on some condition. The join looks a bit like this: var data=[{x:10,y:10}, {x:20, y:30}]; var shape = "rect"; ... var point = svg.selectAll(".point") .data(data, function(d, idx) { return "row_" + idx + "_shape_" + shape;}) ; The d3 enter() and exit() selections do not seem to reflect any changes caused by "shape" changing. Fiddle is here: http://jsfiddle.net/schmoo2k/jcpctbty/ 回答1: You need to be aware

问题 I have a group of svg nodes that have a click event listener attached to them. I also assign a nodeId to uniquely identify my different nodes var nodeId = 0; nodeGroup.append("svg:circle") .attr("r", 7) .style("fill", "blue") .style("stroke", "orange") .attr("data-node-id", function(d,i) { return nodeId += 1; }) .on('click', nodeInfo); On click, the node triggers a function to display the node object var nodeInfo = function displayNodeInfo(node){ console.log(node); } What I am trying to do is

问题 I've created a histogram using d3 . Everything was fine and here's where I got stuck. I wanted to draw a vertical line on some value. Think that I wanted to draw a line corresponding to some value. Suppose 180. I tried, tried and still trying I can't figure a way to do it. Here's the Fiddle. Someone please help me to draw a line corresponding to some specific value. 回答1: If anyone interested to know how to draw vertical lines, below is the code on how to draw vertical line. Edited from the

问题 Here is my confusion(jsfiddle-demo) about the category10 function in D3: > var a = d3.scale.category10() > a(0) "#1f77b4" > a(10) //the expected different color value "#2ca02c" If I call directly the returned function of calling category10 , things go like this > d3.scale.category10()(0) "#1f77b4" > d3.scale.category10()(10) //the SAME color! Why? "#1f77b4" In my opinion, calling d3.scale.category10()(10) should yield the same value as calling a(10) . What is going wrong here? 回答1: Each call

问题 I created two different SVGs . One contains a graph with data points, the other one contains three lines. The lines color are supposed to be dependent on the selected data point and I have not managed to get this done yet (more details below). The jsfiddle can be found here: jsfiddle. What I would like to do is to change the color of the three lines when I mouseover the data points. I managed to change the color of all lines to the same color but would actually like to use the color that is

问题 I want to be able to change the radius of each node in my graph that i am creating using d3.js. However, i want to change the radius of each node, one at a time, and i want to able to control the delay between each change along with the sequence of the nodes. For now this is what i have in terms of code: var nodes = svg.selectAll(".node"); nodes.each(function() { d3.select(this). transition(). delay(100). attr("r", "5") }); You can replicate this simply by using the code at this link: http:/

问题 I inherited some bubblechart code to which I need to add text wrapping of the bubble chart labels. How do I apply the answer here How to linebreak an svg text within javascript? to this scenario? I don't understand how to make d3 change the svg markup as given in the solution. Here is my code: function renderBubbles(root) { var diameter = element[0].offsetWidth * .6, format = d3.format(",d"), color = d3.scale.category20c(); var bubble = d3.layout.pack() .sort(null) .size([diameter, diameter])

问题 I'm trying to draw an ordinal axis with uneven band widths. I know there's a way to do it with range, as specified here, but it doesn't seem to work with rangeBands or rangeRoundBands. var letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m"]; var custom_range = [0, 19, 78, 97, 116, 135, 154, 173, 192, 211, 230, 249, 268]; var y_scale = d3.scale.ordinal().domain(letters).rangeRoundBands(custom_range); console.log(y_scale.range()); The resulting scale is: [3, 4, 5, 6, 7,

问题 I am experimenting with this d3 demo and I am having trouble debugging why I am experiencing different behavior in Chrome vs. Safari/FireFox. If I run the full code below, it works in Chrome but not in Safari/Firefox. I seem to have isolated the problem to the following: If I change this line: var circles = chart.select("#points").selectAll("circle") to this: var circles = chart.selectAll("circle") it works in Safari/Firefox/Chrome, but I want to understand what is happening and why the code