d3.js

问题 I wanted to produce a visualization that contains a good deal of nodes with the d3 force layout (more than 500 hundred nodes). While it is working correctly with as much as 200 hundred nodes it gets very slow with about 500, in the sense that the layout hiccups from one frame to the next and events like mouseover on nodes are far from being responsive. This made me ask several questions. Is there some kind of limit in the number of nodes after which it is not recommended to use the force

问题 I have spent loads of time trying to replicate the attached diagram in SVG/D3.js. The closest I have come is by using the code attached. I have explored using the tree function but can only create one band of circles. The issue with the attached code is it will be very hard to get it looking smooth and smart by manually typing which pixel coordinates each circle must sit. For info, the dataset will do nothing more than colour these circles, so it can be entirely static in terms of shape. The

问题 I am trying to change the colors of different lines of the nvd3 line chart here but am unable to understand how to do so. I would like to change the colors of the 2 lines in the example to green and cyan. I tried nv.addGraph(function() { var chart = nv.models.lineChart() .useInteractiveGuideline(true) .color(["rgb(0,255,0)","rgb(255,165,0)"]); } It worked for scatter chart here. But the color does not change for line chart. Any suggestions. Thanks 回答1: You can use this! return [ { values:

问题 This question might have been answered somewhere else, but before marking as duplicate, please help me with it. I am referring to the following codepen using react and d3: https://codepen.io/swizec/pen/oYNvpQ However, I am not able to figure out how can this codepen work with variables declared inside the class without any keywords: class Colors extends Component { colors = d3.schemeCategory20; width = d3.scaleBand() .domain(d3.range(20)); .... } When I try to execute this code, I get the

问题 I'm trying to use D3 to find the lowest value in my dataset. However, I also have values that are 0, but I want D3 to find the lowest value that is not 0. Currently I am using: d3.min(data, function(d) {return d.houseValues; }) But obviously this returns 0 sometimes, when a 0 is found. Is there a way to do this? Or is the only solution to build a normal for-loop with an if-statement to ignore the 0 values..? Thanks! 回答1: You can use the constant Infinity , since Math.min(Infinity, someNumber)

问题 I'm using d3 with svg:foreignObject to create a formatted text box that appears next to a data point on hover. The below strategy works perfectly in Chrome, but the foreignObject is not visible in Safari. The Safari inspector shows the foreignObject in the DOM, in the proper location and with all the correct data. I just can't see it! What am I missing? My code looks like this: var description = svg.append('foreignObject') .attr('class', 'description') .attr('id', 'desc') .attr('x', x) .attr(

问题 I'm using d3 with svg:foreignObject to create a formatted text box that appears next to a data point on hover. The below strategy works perfectly in Chrome, but the foreignObject is not visible in Safari. The Safari inspector shows the foreignObject in the DOM, in the proper location and with all the correct data. I just can't see it! What am I missing? My code looks like this: var description = svg.append('foreignObject') .attr('class', 'description') .attr('id', 'desc') .attr('x', x) .attr(

问题 Is there an obvious d3 V4 equivalent to the V3 d3.behavior.zoom() .center([width / 2, height / 2]) syntax. (I've searched around, and most working examples of manual zooming etc run in V3... and the API docs don't mention it as best I can tell. ) I am trying to add manual zoomin/out buttons, using the example: https://bl.ocks.org/mbostock/7ec977c95910dd026812 as a base, but with V4. Edit Harpal show me an example working in d3 v4, but i dont know how apply to my project. So there is my script

问题 I'm using D3.js to manipulate some SVG elements. I learned (the hard way) that newer versions of FireFox don't really handle D3's force layout well. So I switched to a simple rotation and it's STILL running crappy in Firefox. In the following code, group1 is an array of 200 <circle> svg elements which I create dynamically: function orbit( target, first ) { /* Other easing options here: https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_ease */ var ease = ( first ) ? 'sin-in' : 'linear';

问题 I'm using React.js to build an app, which includes quite a few svg charts. I'm using d3 functions that help in chart creation, such as scales, but then using React to generate the svg elements. Here's a great writeup on the approach: http://10consulting.com/2014/02/19/d3-plus-reactjs-for-charting/ Part of why I'm going down this road was for performance - the first version of the app was too slow. It has a lot of elements and a lot of user-interactivity, all client-side. I'm trying to