d3.js

问题 I have a scatter plot charge where i want to change the size of the dots to make them look like bubble. Can someone show me how to change size of the bubble? Here is my code: var chart = c3.generate({ data: { xs: { IBM: 'ibm_x', Microsoft: 'microsoft_x', }, columns: [ ["ibm_x", 3.5, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3.0, 3.0, 4.0, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3.0, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3.0, 3.4, 3.5, 2.3, 3.2, 3.5

问题 I have the following code and I would like to add text in the circles. How could I make it possible; I have looked at these possible duplicates Insert text inside Circle in D3 chart const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .enter().append("line") .attr("stroke-width", d => Math.sqrt(d.value)); // link.append("title").text(d => d.value); const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5)

问题 I have some datetime string e.g. "2017-10-29T02:54:03.125983+00:00" "2017-10-29T02:09:22.1453833+00:00" with 6 or 7 digital length milliseconds, how can I parse it to date object in d3 javascript language? I have tried d3.timeParse("%Y-%m-%dT%H:%M:%S.%LZ"); but failed, it returns null 回答1: What you have is not a long millisecond ✻ : that is a microsecond . There is a specifier in D3 for microseconds since D3 v4 (see here). To parse microseconds, use "f" . According to the API: %f -

问题 While the below piece of code works find in d3v3, it fails in v4. var nodes = tree.nodes(root).reverse(), links = tree.links(nodes); Uncaught TypeError: tree.nodes is not a function What is the alternative for it in v4? 回答1: import { hierarchy, tree } from 'd3-hierarchy' // create a hierarchy from the root const treeRoot = hierarchy(root) tree(treeRoot) // nodes const nodes = treeRoot.descendants() // links const links = treeRoot.links() 来源： https://stackoverflow.com/questions/41087568/d3js

问题 I would like to (sort of) combine the Hierarchical Edge Bundling and the Radial Reingold–Tilford Tree It would look a little like this (pardon my horrible paint.net skills)*: *the children are supposed to be in an arc, like in the Tree. I have setup this fiddle that shows simple data in HEB: https://fiddle.jshell.net/d1766z4r/2/ I have already combined the two types of data (in comments at the begining, that will replace the current variable "classes"): var classes = [ {"name":"test.cluster1

问题 I have a map of the US states and counties in a SVG graphic rendered by D3. Each path have mouseover, mouseout and click events bound to it, as well as the FIPS county code set as the path ID. I have a jQuery Autocomplete input where the user can input the name of a state or county. Given that input, which makes the corresponding FIPS ID available, how can I trigger the mouseover event programatically? 回答1: I figured out the answer. The main problem is D3 does not have an explicit trigger

问题 I'm learning nvd3.js to draw charts. From a sample from the site, I pick following simple code to test: chart = nv.models.lineChart() .margin({ left: 100, right: 100 }) //Adjust chart margins to give the x-axis some breathing room. .useInteractiveGuideline(true) //We want nice looking tooltips and a guideline! .transitionDuration(350) //how fast do you want the lines to transition? .showLegend(true) //Show the legend, allowing users to turn on/off line series. .showYAxis(true) //Show the y

问题 I'm trying to make a donut chart that looks like one below I'll be using angularJS, SVG and D3.js I've no clue how to get those rounded ends, Please help. Thanks. 回答1: Simple answer: you use masks. We use a mask to draw the inner portion of the bezel. And a mask to cut the hole in the middle. The hole mask isn't really necessary. You could form the donut with thick lines. But it seemed easier to me to draw circular sectors, then make the hole. Here it is in SVG form. I'll leave the conversion

问题 I'm trying to make a donut chart that looks like one below I'll be using angularJS, SVG and D3.js I've no clue how to get those rounded ends, Please help. Thanks. 回答1: Simple answer: you use masks. We use a mask to draw the inner portion of the bezel. And a mask to cut the hole in the middle. The hole mask isn't really necessary. You could form the donut with thick lines. But it seemed easier to me to draw circular sectors, then make the hole. Here it is in SVG form. I'll leave the conversion

问题 When I zoom to a specific location on a mouse click and then try to pan or when I'm using the mouse wheel, the zoom behavior jumps. It seems that my zoom level is being restored like it was before the mouse click. Here is my event handler: function click(d) { var x, y, k; if (d && centered !== d) { var centroid = path.centroid(d); x = centroid[0]; y = centroid[1]; k = 4; centered = d; } else { x = width / 2; y = height / 2; k = 1; centered = null; } svgContainer.transition() .attr("transform"