d3.jsRelated issues-Collection of common programming errors
Zikes
javascript svg d3.js
I’m using the SVG located at http://upload.wikimedia.org/wikipedia/commons/3/32/Blank_US_Map.svg in a project and interacting with it with d3.js. I’d like to create a click to zoom effect like http://bl.ocks.org/2206590, however that example relies on path data stored in a JSON object to calculate the centroid. Is there any way to load path data in d3 from an existing SVG to get the centroid?My (hackish) attempt so far:function get_centroid(sel){var coords = d3.select(sel).attr(‘d’);coords = c
xiaohan2012
javascript d3.js
Here is my confusion(jsfiddle-demo) about the category10 function in D3:> var a = d3.scale.category10() > a(0) “#1f77b4” > a(10) //the expected different color value “#2ca02c”If I call directly the returned function of calling category10 , things go like this> d3.scale.category10()(0) “#1f77b4” > d3.scale.category10()(10) //the SAME color! Why? “#1f77b4″In my opinion, calling d3.scale.category10()(10) should yield the same value as calling a(10).What is going wrong here?
Jetson John
javascript svg d3.js
I am starting with d3.js, and am trying to create a network graph each circle of which contains a label.What I want is a line break an svg text.What I am trying to do is to break the text into multiple <tspan>s, each with x=”0″ and variable “y” to simulate actual lines of text. The code I have written gives some unexpected result.var text = svg.selectAll(“text”).data(force.nodes()).enter().append(“text”);text .text(function (d) {arr = d.name.split(” “);var arr = d.name.split(” “);if
ckersch
javascript google-chrome d3.js google-chrome-devtools
While working on a JavaScript application, I came across something unexpected while using the Chrome developer tools. I have, within a function, the following block of code:var b = bins + 1,selectValues = [],selectedPoints = [],n = numVals;while(b–){selectValues.push(0)};//Main selection iteratorif (range_min == range_max){mainSVG.selectAll(“.sim-ui-scatter-points”).each(function(){d3.select(this).call(addClass,[“foo”]);d3.select(this).call(removeClass,[“bar”,”foobar”]) });} else {do some othe
Jeroen Moons
javascript layout svg stack d3.js
I successfully mapped y values, but I’m having trouble mapping an x value to an arbitrary field on my values when creating a stacked bar graph using the stack layout. I’m not really familiar with Javascript and d3; so I’m probably missing something basic here.A value in my array of data looks like { “xInit”: 0, “yInit”: 91 }. I want to map xInit to x in the graph and yInit to y.This works (suggested by Bryan Clark):var st = d3.layout.stack().values(function (d) { return d.values; }).y(function (
musically_ut
javascript csv d3.js
I am new to d3.js any help is much appreciated csv file is Year,Make,Model,Length 1997,Ford,E350,2.34 2000,Mercury,Cougar,2.38code is d3.csv(“../test/car.csv”, function(d) {return {year: new Date(+d.Year, 0, 1), // convert “Year” column to Datemake: d.Make,model: d.Model,length: +d.Length // convert “Length” column to number}; }, function(error, rows) {console.log(rows); });expected result is [{“Year”: “1997”, “Make”: “Ford”, “Model”: “E350”, “Length”: “2.34”},{“Year”: “2000”, “Make”: “Mercury”
VividD
d3.js tree nodes hierarchy
I have created a collapsible tree to represent some biological data.In this tree the size of the node represents the importance of the node. As I have a huge data and also the sizes of the nodes vary,they overlap over each other. I need to specify the distance between the sibling nodes.I tried tree.separation() method but it didn’t work.Code is as follows :tree.separation(seperator);function seperator(a, b) {if(a.parent == b.parent){if((a.abundance == (maxAbd)) || (b.abundance == (maxAbd))){retu
Sam Selikoff
javascript d3.js
I am following Mike Bostock’s pattern for reusable charts – closures with getter/setters. But somehow, when I instantiate a new chart object with new properties, existing charts are being updated with these properties:var chart1 = new StackedAreaChart(); d3.select(‘#chart1’).data([data]).call(chart1); // a new chart – whose properties end up in chart1! var chart2 = new StackedAreaChart().colors([‘green’, ‘blue’]);Here’s an example: http://jsfiddle.net/samselikoff/YZ6Ea/3/. Resize the window
Peter
jquery node.js express d3.js requirejs
I have been struggling with this for a while now but I am not making any progress. I always run into something unexpected.I want to support browser code in node.js (express) that uses require.js, jquery and d3.js to build up a graph (svg), based on http request input parametersThe problem I am having is that once requirejs is initialized it will always return the same jquery and d3.v2 modules and these will all (for each of the client http request) start doing their thing on the same DOM (jsdom)
user1840255
javascript csv graph d3.js
I have a variable called final csv which looks like and is stored in a CSV format. The lines are separated by a \n. I’m using the statement D3.csv.parse. Can anyone tell me why nothing appears on the page at all? :- String, Floatvalue, 1value2, 2 function generateGraph(finalcsv) {var finaldata = finalcsv;var margin = {top: 20, right: 20, bottom: 30, left: 40},width = 960 – margin.left – margin.right,height = 500 – margin.top – margin.bottom;var formatPercent = d3.format(“.0”);var x = d3.scale.or
Web site is in building