d3.js

问题 I am trying to build the d3 chart with the positive and negative number values as below and I found some examples of this and this. I am facing difficulties in customizing it because I have no prior experience in d3 and I think it would need some time for learning. I tried that as well. Created some simple chart examples but could not achieve the above. So I thought of reaching for help. Maybe someone can help with this if they have already done a similar chart or some guidance would be

问题 I have been using React and D3 separately and now have a project where I need low level control over the plotting function of an application. Basically, I need to be able to go and fetch higher resolution data from a database as the user zooms in, and vice versa as the user zooms out, on a plot. I have found a few methods to use D3 and React together. I wanted to try and keep all of my React code based around the hooks API as that is what is used for the rest of the code base. I am struggling

问题 Am working with collapsible tree top to bottom orientatin. Here i stuck with some problem. To implement the tree am using d3.v3.js. How can i append check box into the tree for each node. // Create the link lines. svg.selectAll(".link") .data(links) .enter().append("path") .attr("class", "link") .attr("d", d3.svg.diagonal().projection(function(d) { return [o.x(d)+15, o.y(d)]; })); svg.selectAll("input") .data(nodes) .enter().append("foreignObject") .attr('x' , o.x) .attr('y', o.y) .attr(

问题 I have some geoJson data that I am charting using d3.geo. When I write something like d3.select("svg") ... .attr("d", function(d) { return path({ type:"MultiPoint", coordinates: get_activity_coords_(d.activities) }); }) I always get a circle for each coordinate. The coordinates represent locations of various stopping points of a journey. What I would prefer is a different shape for the first and the last coordinate. Is it possible to do this using MultiPoint, is there an example that I can

问题 I am undertaking yet another attempt to draw a family tree with d3. For this, I would like to use the usual node-link graph (like this one): But with a link style like that usually found in d3 trees, i.e. be the Bezier curves with horizontal (or vertical) ends: Is it possible to change the links accordingly, without diving into the d3-force code? 回答1: If you are just looking to match the style of the links, no need to dive into the d3-force code, it only calculates position, not anything

问题 I am undertaking yet another attempt to draw a family tree with d3. For this, I would like to use the usual node-link graph (like this one): But with a link style like that usually found in d3 trees, i.e. be the Bezier curves with horizontal (or vertical) ends: Is it possible to change the links accordingly, without diving into the d3-force code? 回答1: If you are just looking to match the style of the links, no need to dive into the d3-force code, it only calculates position, not anything

问题 I'm wondering if its possible to define a CSS style for a tooltip function displayed by d3.js on mouse over event in the actual body of the definition rather than on top of the page in the style section. JAVASCRIPT: var tooltip = d3.select("#scatter-load").append("div") .attr("class", "tooltip") //.attr("position", "absolute") //.attr("width", "200px") //.attr("height", "30px") //.attr("pointer-events", "none") .style("opacity", 0); chocolateGroup.append("circle") .attr("r", function(d)

问题 I am trying to create a "Flowchart/Workflow" type of chart/representation. Each node will be a "task" and then we will draw lines to connect each task to the next one so that we can layout the workflow. This example is very close to what we want and so we've chosen it as a "jumping off point". You can see the code for this example here. And here's a snippet of it at work: /* Copyright (c) 2013 Ross Kirsling Permission is hereby granted, free of charge, to any person obtaining a copy of this

问题 I am learning d3. I want to make a line chart using json data. The data I am using is: var data = [ { "at": "2014-11-18T07:29:03.859Z", "value": 0.553292}, { "at": "2014-11-18T07:28:53.859Z", "value": 0.563292}, { "at": "2014-11-18T07:28:43.859Z", "value": 0.573292}, { "at": "2014-11-18T07:28:33.859Z", "value": 0.583292}, { "at": "2014-11-18T07:28:13.859Z", "value": 0.553292}, { "at": "2014-11-18T07:28:03.859Z", "value": 0.563292}]; I want "at" on x axis and "value" on y axis. Also I need to

问题 How to draw a circle with gradient color? Say, a gradient from yellow to blue. Normally, to create a circle in yellow we can use the following code: var cdata=[50,40]; var xscale=40; var xspace =50; var yscale=70; var svg = d3.select("body") .append("svg") .attr("width", 1600) .attr("height", 1600); var circle = svg.selectAll("circle") .data(cdata) .enter() .append("circle"); var circleattr = circle .attr("cx", function(d) { xscale = xscale+xspace; return xscale; }) .attr("cy", function(d) {