d3.js

D3 function only iterating though last point of data in an array.

余生颓废 提交于 2020-01-06 02:55:07
问题 For the following lines of code, once I enter my locationArray into the data, the iteration runs for the length of the array, but starts on the final iteration such that i is always = 1 (the array has a length of two nested arrays). Why won't it start with array[0]? var canvas = d3.select("#map-canvas"); setTimeout(function(){ console.log(canvas) canvas .selectAll(".marker") .append('svg') .attr('width', 400) .attr('height', 400) .style("position", "relative") .style("right", 150) .style(

Choropleth map returning undefined

痴心易碎 提交于 2020-01-06 02:52:09
问题 I'm attempting a choropleth map of US Counties, and am essentially using Mike Bostock's example from here https://bl.ocks.org/mbostock/4060606 I am using education instead of unemployment, but otherwise it's the same. I'd like to add just one more piece to it and have the county name display along with the rate. However, when I call the county name, I get "undefined" returned. To be clear 'rate' returns just fine, 'county' shows up undefined. Can anyone help? Thanks! <!DOCTYPE html> <meta

How can I specify a domain x-axis in NVD3 lineChart

穿精又带淫゛_ 提交于 2020-01-06 02:25:54
问题 I am trying to define a lineChart in nvd3 with a domain scale on the x-axis. I can't get it to work. The first issue is that the voronoi code blows up. But even if I turn voronoi off, the x-axis still just shows a range of -1 to 1, instead of my domain values. I think a workaround would be to assign numbers to the x-axis values, and then use a tick function to draw the text. But I want to figure out why I can't make it work with an ordinal scale. Below is the code I have tried. My data works

Trouble with storing enter selections containing transitions

半世苍凉 提交于 2020-01-06 01:36:19
问题 If I try to store the following enter selection, I get an error when I try to access it. I don't have a problem if I remove the transition. Why? Are there other restrictions on storing selections? Here is an example: // this works var enterSel = d3.select("svg") .selectAll("circle") .data([100, 200, 300]) .enter() .append("circle") .attr("cx", d => d) .attr("cy", "100") .attr("fill", "red") .attr("r", "0") .transition() .duration(2000) .attr("r", "50"); The above appends and transitions three

how to update foci dynamically in multi-foci force-layout in d3.js

泪湿孤枕 提交于 2020-01-05 12:31:16
问题 I have a multi-foci layout and couldn't find a way to dynamically set the foci. In the code below using a subset of data, I wish to be able to toggle between id-group and familiarity, which would change the chart from 3 clusters of bubbles to 5 clusters of bubbles. Current foci are hard-coded, which prevent toggling from working. var data = [ {"id": 0, "name": "AngularJS", "familiarity":0,"r": 50 }, {"id": 0, "name": "HTML5", "familiarity":1,"r": 40 }, {"id": 0, "name": "Javascript",

Position of a custom shape using dagre

柔情痞子 提交于 2020-01-05 10:04:31
问题 I'm trying to create a custom shape and set x and y axis on the svg, so far I got it done but for on top of my element I have a transform attribute that belongs to a group (g) that references the node, I tried to change the attribute setting a custom transform but without any luck. my question is, how can I change the x and y position for the whole node? render.shapes().task = function(parent, bbox, node) { var shapeSvg = parent.insert('rect', ':first-child') .attr('x', node.x) .attr('y',

Keeping text horizontal while it's position is rotating with d3.js

北城余情 提交于 2020-01-05 09:46:34
问题 I'm trying to add labels to the planets around the sun into this example : http://bl.ocks.org/djvanderlaan/4953593. So far, I've managed to add the labels, but the orientation of the labels is rotating with their position, while I want to keep them horizontal for the comfort of the readers. I've been finding a beginning of a solution to my problem here : how to keep text orientation unchanged during rotation in SVG but it's seems very complicated to me (I am a newbie and really not good at

Keeping text horizontal while it's position is rotating with d3.js

瘦欲@ 提交于 2020-01-05 09:46:27
问题 I'm trying to add labels to the planets around the sun into this example : http://bl.ocks.org/djvanderlaan/4953593. So far, I've managed to add the labels, but the orientation of the labels is rotating with their position, while I want to keep them horizontal for the comfort of the readers. I've been finding a beginning of a solution to my problem here : how to keep text orientation unchanged during rotation in SVG but it's seems very complicated to me (I am a newbie and really not good at

Custom layouts using D3

偶尔善良 提交于 2020-01-05 09:11:54
问题 I want to implement a custom layout/chart. Currently I have implemented a demo of it using pure HTML, CSS & jQuery (http://jsfiddle.net/yuvraj20/Vj7Vy/). $(document).ready(function(){ var $circles = $(".circles"); routine(); function routine(){ $circles.addClass("visible"); //Intial load animation $("div", $circles).addClass("visible"); $(".line").addClass("grow"); } $circles.on("click", function(){ if($circles.hasClass("rotate")){ var $this = $(this); $circles.removeClass("rotate"); $("

Custom layouts using D3

て烟熏妆下的殇ゞ 提交于 2020-01-05 09:09:29
问题 I want to implement a custom layout/chart. Currently I have implemented a demo of it using pure HTML, CSS & jQuery (http://jsfiddle.net/yuvraj20/Vj7Vy/). $(document).ready(function(){ var $circles = $(".circles"); routine(); function routine(){ $circles.addClass("visible"); //Intial load animation $("div", $circles).addClass("visible"); $(".line").addClass("grow"); } $circles.on("click", function(){ if($circles.hasClass("rotate")){ var $this = $(this); $circles.removeClass("rotate"); $("