d3.js

问题 The issue is that I have a lot of series on my chart and, on load, I would like only 3 selected. Is there a way to 'disable' ( hide ) a series on nvd3 Horizontal Multi-Bar Chart? ( I'm looking for the click series behavior but programatically ) I have tried to send JSON with 'visible': false, but it not works. var data=[{"key": "Series 1", "visible": false, "values": [{"value": 10000.0, "label": ... Following @shabeer90 instructions tested with: "disabled": true, In this case series is

问题 Transitions in combination with rotations have odd results. Here is a fiddle with my problem: http://jsfiddle.net/emperorz/E3G3z/1/ Try clicking on each square to see the varying behaviour. Please forgive the hacked code, but if I use transition with rotation (and x/y placement) then it loops about. I have tried: 1) all in the transform (rotate then translate), and that seems mostly okay. A little wobbly. 2) just rotate in the transform, positioned using x/y attributes. Flies all over the

问题 I have an svg element with data created this way: var chart = d3.select("#my-div").append("svg"); var chartData = []; chartData.push([{x: 1, y: 3}, {x: 2, y: 5}]); chartData.push([{x: 1, y: 2}, {x: 2, y: 3}]); .domain([1, 5]); var lineFunc = d3.svg.line() .x(function (d) { return xRange(d.x); }) .y(function (d) { return yRange(d.y); }) .interpolate('linear'); chart.append('g').classed('lines', true).selectAll('path').data(chartData).enter() .append('path') .attr('d', function(d) { return

问题 I am trying to sort a JavaScript array based on sort order in a second array. I have already gone through other similar questions here in SO and came up with the below code. Be the output is not getting as expected. var legends = ["Maths","Physics","English","French","Chemistry"]; var sortOrder = [1,400,300,200,-3]; legends.sort( function (a, b) { return sortOrder[legends.indexOf(a)] >= sortOrder[legends.indexOf(b)]; }); console.log(legends); The desired output is ["Chemistry", "Maths",

问题 is it possible to draw dashed links only for child to subchilds.Parent node to its child should be regular continuous links a b ! ! ->dashed links ! ! c d | | ->continues links a 回答1: It is possible. Take a look at this live example. Screenshot is here: I created two styles, one for continuous, and another for dashed link: .link_continuous { fill: none; stroke: #ff0000; stroke-width: 1.5px; } .link_dashed { fill: none; stroke: #ff0000; stroke-width: 1.5px; stroke-dasharray: 20,10,5,5,5,10; }

问题 The d3 documentation on d3.curveBundle() provides an example of how to set beta: var line = d3.line().curve(d3.curveBundle.beta(0.5)); However, the value of beta supplied seems to have no effect on the curve produced. Here is a minimal example, using beta = 0.0 which should produce a straight line between the two end points: // create a 300x300 svg element var w = 300; var h = 300; var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); // create a line generator var

问题 is there any way to save a D3 SVG image as a high quality image? If yes please explain... As of now i am using following code to save svg as image,but images i am getting are not high quality- var canvas1 = document.createElement('canvas'); canvas1.id = "canvas1"; canvas1.width = w+50; canvas1.height = h+50; document.getElementById('pngcon').appendChild(canvas1); var html = new XMLSerializer().serializeToString(document.getElementById(chartId).querySelector('svg')); var imgsrc = 'data:image

问题 D3 has 2 ways of setting a class: selection.attr("class", (d) => d.isFoo ? "foo" : ""); selection.classed("foo", (d) => d.isFoo) I'm looking for a way to add a class named as per the data. I.e. something like: selection.classed((d) => "node" + d.id, true); I don't want to use id because multiple DOM elements will share that class. I don't want to use attr because it may potentially overwrite other classes already there. So I could do selection.attr("class", (d) => d3.select(this).attr("class"

问题 I have two datasets that have similar columns/dimensions but are grouped differently by row and contain different measures. Ex: Dataset 1 Year Category SubCategory Value01 Value02 2000 Cars Sport 10 11 2000 Cars Family 15 16 2000 Boats Sport 20 21 2000 Boats Family 25 26 ... Dataset 2 Year Category ValueA ValueB 2000 Cars 100 101 2000 Boats 200 201 ... Dataset 1 has its own crossfilter object, Dataset 2 has a separate crossfilter object. I have multiple dc.js charts, some tied to the dataset

问题 The goal is to combine d3 force simulation, g elements, and voronoi polygons to make trigger events on nodes easier, such as dragging, mouseovers, tooltips and so on with a graph that can be dynamically modified. This follows the d3 Circle Dragging IV example. In the following code, when adding the clip path attribute to the g element and clippath elements: Why does dragging not trigger on the cells? Why do the nodes become obscured and the paths lose their styles on edges? How can this be