d3.js

问题 I have a data that is an array of values, like this: [244, 13, 24, 0, 18, 24, 3, 4, ... ] While array indices are simply integers, in this data they represent a range of dates such that the 0th index represents, say, 06/04/2013 and the last index represents 09/30/2013 although they're actually in seconds since 1970, so 1370378409 and 1380575923 would be more precise. I would like my x-axis to show the dates that the array indices represent. So that the ticks would look like dates: Mon 08 ,

问题 I have a data that is an array of values, like this: [244, 13, 24, 0, 18, 24, 3, 4, ... ] While array indices are simply integers, in this data they represent a range of dates such that the 0th index represents, say, 06/04/2013 and the last index represents 09/30/2013 although they're actually in seconds since 1970, so 1370378409 and 1380575923 would be more precise. I would like my x-axis to show the dates that the array indices represent. So that the ticks would look like dates: Mon 08 ,

问题 I'm creating a D3 bubble chart, using json data. I'm using sinatra for my app, and my json data is available at localhost:4567/data.json I tried using var myData = []; $.get('data.json', function(data) { myData = data; console.log(myData); ....... and I get the correct values in the javascript console, but the bubble chart does not render. (The rest of the code works if I copy and paste the data from 'data.json' and set it to a var, but it does not work if I use the $get method). Do you have

问题 I have the following code var m = [20, this.settings.get("margin_right"), 20, this.settings.get("margin_left")], w = width - m[1] - m[3], h = height - m[0] - m[2], i = 0; var tree = d3.layout.tree() .size([h, w]); var diagonal = d3.svg.diagonal() .projection(function(d) { return [d.y, d.x]; }); var vis = d3.select(this.el).append("svg:svg") .attr("width", w + m[1] + m[3]) .attr("height", h + m[0] + m[2]) .append("svg:g") .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); data.x0 = h

问题 in the above code my .append("text") dosent work.I do not get any text inserted on my links. i tried using link.append("path")..using this i can see the text but not the links. I want to use link.insert("path") and still be able to add text and be able to collapse and expand nodes along with the link text. Pls help var link = svg.selectAll("path.link") .data(links, function (d) { return d.target.id; }); // Enter any new links at the parent's previous position. // var link1=link.enter(); link

问题 in the above code my .append("text") dosent work.I do not get any text inserted on my links. i tried using link.append("path")..using this i can see the text but not the links. I want to use link.insert("path") and still be able to add text and be able to collapse and expand nodes along with the link text. Pls help var link = svg.selectAll("path.link") .data(links, function (d) { return d.target.id; }); // Enter any new links at the parent's previous position. // var link1=link.enter(); link

问题 I have an array of equally spaced values which I am using to draw concentric circles. I want to use an emanating effect, in essence, remove the outermost circle once its value exceeds the maximum value and add a new one at the center to compensate. I am unsure about manipulation on data set to remove and add new circle. <script src="https://d3js.org/d3.v4.min.js"></script> <script> var svg = d3.select("body").append("svg"); var w = window.innerWidth; var h = window.innerHeight; var separation

问题 I would like to show tooltip on hovering existing svg elements. In the live example the elements to hover are created when binding data. In my case these elements exists already in DOM (circles). so I need to select them right after selectedElms.enter() My question is how can I apply tip.show and tip.hide on circles ? var data = [{ train: 1 }, { train: 2 }, { train: 3 }, { train: 4 }] var svg = d3.select('svg') var tip = d3.tip() .attr('class', 'd3-tip') .offset([-10, 0]) .html(function(d) {

问题 Here is my d3.js code var circles = vis.selectAll("circle").data(data) circles .enter() .append("svg:circle") .attr("stroke", "black") .attr("cx", function (d) { return xRange(d.year); }) .attr("cy", function (d) { return yRange(d.count); }) .style("fill", function(d,i){return color(i);}) .append("svg:title") .text(function (d) { return d.corpus; }) In the end i have appended a tooltip to the circles.I tried to attach jquery tipsy tooltip to the circles but did'nt work.Here is how i did it(i

问题 I am trying to get this library of CSS flag sprites to render in my D3 Force layout graph https://www.flag-sprites.com/ However, nothing seems to render. Here is the codepen for the same. http://codepen.io/redixhumayun/pen/ZLELvG?editors=0010 Here is the relevant code where I am trying to render the sprite var node = svg.selectAll('.node') .data(data_nodes) .enter().append('svg:image') .attr('class', function(d){ return 'flag flag-'+d.code }) .attr('src', 'blank.gif') .attr('width', '20px')