d3.js

问题 I've been very closely following this post about D3 line transitions, implementing something similar to this, except having axis transitions by time. The end goal is to display real time data points. I have defined axes, like so: var x = d3.time.scale() .domain([now - (n - 2) * duration, now - duration]) .range([0, width]); var y = d3.scale.linear() .range([height, 0]) .domain([0, 100]) var axisx = svg.append('g') .attr('class', 'x axis') .attr('transform', `translate(0, ${height})`) .call(x

问题 I've been very closely following this post about D3 line transitions, implementing something similar to this, except having axis transitions by time. The end goal is to display real time data points. I have defined axes, like so: var x = d3.time.scale() .domain([now - (n - 2) * duration, now - duration]) .range([0, width]); var y = d3.scale.linear() .range([height, 0]) .domain([0, 100]) var axisx = svg.append('g') .attr('class', 'x axis') .attr('transform', `translate(0, ${height})`) .call(x

问题 I have some old relationship type - force chart from version 3 of d3. I am keen to clean up and reduce the codebase -- reduce the reliance on all the functions. I had to refactor the data set and make nodes. I have started trying to port the code - but now running into upgrade errors- "d3.force is not a function" looking at this as a reference D3 forceSimulation and dragging, what is node.fx/node.fy? keen to fix the upgrade refactor to make the creation of this chart easier and simpler -

问题 I am creating a wordcloud by modifying code from : https://github.com/jasondavies/d3-cloud. I can change the size by modifying w & h but I want to scale the word cloud as the browser window changes. What would be the best method to achieve this? Code also posted at http://plnkr.co/edit/AZIi1gFuq1Vdt06VIETn?p=preview <script> myArray = [{"text":"First","size":15},{"text":"Not","size":29},{"text":"Bird","size":80}, {"text":"Hello","size":40},{"text":"Word","size":76},{"text":"Marketplaces",

问题 I have a d3 selection upon which I have defined event callbacks. var obj = d3.select("#kk").on("mouseleave",function(){ console.log("mouse leave"); }); How can I trigger the event externally? Is there something like: obj.mouseleave(); // actuall mouse leave function calling If there is, and if I select the object without referring to obj , will the trigger still work? As in: var newObje=d3.select("#kk"); newObje.mouseleave(); //will this trigger the previously defined instructions 回答1: If you

问题 I'm making a bar chart with the following code: svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.value) - barWidth / 2; }) .attr("width", barWidth) .attr("y", function(d) { return y(d.frequency); }) //.attr("height", 0) //.transition() .attr("height", function(d) { return height - y(d.frequency); }); If I add the commented-out lines, then the bar transitions from height 0 to its proper height; however, for some reason instead

问题 I'm trying to repurpose a guage chart I found here. Currently I have the needle moving on submit, however it resets to 0 before updating to the new position, I'd rather it just adjust the position directly. When trying to think of a way to do it, I figured that I would need to modifiy this snippet of code which handles the reset; Needle.prototype.moveTo = function(perc) { var self, oldValue = this.perc || 0; this.perc = perc; self = this; // Reset pointer position this.el.transition().delay

问题 I'm new to d3 and svg Could someone explain me how technically is working the drag/pan with the clip-path element http://jsfiddle.net/MKmHM/1/ var zoom = d3.behavior.zoom() .x(x) .on("zoom", draw); svg.append("clipPath") .append("rect") .attr("id", "clip") .attr("width", width) .attr("height", height) .attr("fill", "blue"); svg.append("rect") .attr("class", "pane") .attr("width", width) .attr("height", height) .call(zoom); svg.append("path") .attr("class", "line") .attr("clip-path", "url(

问题 This is the follow up question of Date labels and partition line are getting overlaid Now It is solved. My date and vertical tick line is getting updated but the problem is I get this weird bar and number see that "2" in the left side: I am getting this green bar named state unassigned. I don't why I am getting this. Below kashmir you can see there is a number "2" (another bar it seems with value 2). So you can see I am getting this for month April So when I use the slider to reproduce it. It

问题 I am trying to add a D3 legend to my donut chart, and I followed the example here: http://bl.ocks.org/ZJONSSON/3918369. The donut chart renders fine. However, I am running into below errors: Inside the d3.legend() function, I am getting this error 'Uncaught TypeError: node.getAttribute is not a function' and 'Uncaught TypeError: this.querySelectorAll is not a function'. I am not sure why...any thoughts? // Alerts.js renderBody() { const {list, currentProgram} = this.props const width = 260;