d3.js

问题 I am trying to extend the x and y axis length and add the arrow at the end. Here is my code and plunker. I need x axis to extend beyond 4.6 and y-axis beyond "AS" and add an arrow at the end. Kindly help. https://plnkr.co/edit/tA6oyKQCCmhNadbARR89?p=preview var margin = {top: 20, right: 20, bottom: 20, left: 40}, width = 420 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x = d3.scale.linear() .range([0, width]); var y = d3.scale.ordinal().rangePoints([height, 0])

问题 How can I reverse how my vertical bar is drawn? I want it to be drawn from the bottom to the top. It is important to maintain the right representation of the dataset https://jsfiddle.net/adai183/ztsh1ptx/ var dataset = [ 10, 80, 5, 5]; //Create SVG element var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("fill", "rgb(250, 128, 114)") .attr("x", function(d, i) { return i * (w / dataset.length);

问题 How can I reverse how my vertical bar is drawn? I want it to be drawn from the bottom to the top. It is important to maintain the right representation of the dataset https://jsfiddle.net/adai183/ztsh1ptx/ var dataset = [ 10, 80, 5, 5]; //Create SVG element var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("fill", "rgb(250, 128, 114)") .attr("x", function(d, i) { return i * (w / dataset.length);

问题 I have a timeline in D3 with a highly modified drag/scroll pan/zoom. The zoom callbacks use the d3.event.transform objects generated by the zoom behavior. I need to add a programmatic zoom that uses my existing callbacks. I have tried and tried to do this without doing so, but I haven't gotten it to work and it would be radically easier and faster to reuse the existing structure. So the input is a new domain, i.e. [new Date(1800,0), new Date(2000,0)] , and the output should be a new d3.event

问题 I'm doing my first data visualization project. It's more for practice, and to learn d3.js as data visualization interests me. My first project is making a force directed graph. The data set is the 50 states linked to their bordering states. The source is the state, the target is the bordering state(s). Hawaii and Alaska have no bordering States. If I leave the target State blank in the csv file, they attach to each other with a middle node that is an empty string. If I make their targets

问题 I'm doing my first data visualization project. It's more for practice, and to learn d3.js as data visualization interests me. My first project is making a force directed graph. The data set is the 50 states linked to their bordering states. The source is the state, the target is the bordering state(s). Hawaii and Alaska have no bordering States. If I leave the target State blank in the csv file, they attach to each other with a middle node that is an empty string. If I make their targets

问题 I have the following arc diagram: I would like to add a gradient to each of the individual arcs, that flows from the outer radius to the inner radius of each individual arc. I am guessing that I will need to create an individual gradient for each arc? let radius = 100; for(let i = 0; i < 5; i ++) { let grad = defs.append('radialGradient') .attr('id', 'mygrad' + i) .attr('gradientUnits', 'userSpaceOnUse') .attr('cx', '0') .attr('cy', '0') .attr('r', radius) grad.append('stop') .attr('offset',

问题 I have the following arc diagram: I would like to add a gradient to each of the individual arcs, that flows from the outer radius to the inner radius of each individual arc. I am guessing that I will need to create an individual gradient for each arc? let radius = 100; for(let i = 0; i < 5; i ++) { let grad = defs.append('radialGradient') .attr('id', 'mygrad' + i) .attr('gradientUnits', 'userSpaceOnUse') .attr('cx', '0') .attr('cy', '0') .attr('r', radius) grad.append('stop') .attr('offset',

问题 How can I capture the mouse over events of two graphs at once. I need to do something like shown in the image below: Can anyone guide me as to how should I approach this ?. So far I was able to get the simple mouseover working for a single graph. 回答1: I'm the author of function-plot which is able to dispatch events to multiple graphs one of them being mouseover , for example var width = 300 var height = 180 var a = functionPlot({ target: '#a', height: height, width: width, data: [{ fn: 'x^2'