d3.js

Animating circles along multiple paths

由 时光怂恿深爱的人放手 提交于 2021-02-10 20:45:28
问题 I am trying to create an animation where circles are being animated on multiple paths. I am able to get the animation I want for one of the paths but am not sure why the circles are only animating on that particular path, instead of being distributed according to the path they belong. The full code can be found on my bl.ocks page: https://bl.ocks.org/JulienAssouline/4a11b54fc68c3255a85b31f34e171649 This is the main part of it var path = svg.selectAll("path") .data(data.filter(function(d){

Add Static Lines on D3 Map Between Latitude and Longitude Points

由 狂风中的少年 提交于 2021-02-10 19:43:13
问题 I have a D3 map of the world with markers on latitude and longitude points that I am interested in. Now I would like to draw simple, static lines connecting these points. How do I do this? This is my code for the map with markers: <!DOCTYPE html> <meta charset="utf-8"> <body> <script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://d3js.org/topojson.v1.min.js"></script> <script> var width = 900, height = 500; // Create Projection var projection = d3.geo.mercator() // Generate

dc.js responsive map and zoom function (mousewheel)

由 ≯℡__Kan透↙ 提交于 2021-02-10 18:35:29
问题 I have forked the example dc.js (version 4) map file is this JsFiddle. What I want is for the map to be responsive to the Bootstrap container. So, if the screen size changes the map is displayed correctly. The SVG is responsive by setting the width and height to null and a CSS format to set the width and height to 100%. However I see that the underlying <g> (layer0) element is not responsive. Therefore I tried to add a scale element to the projection. But unfortunately I don't know how to

Binding D3 Tree Node Position to X Axis

由 断了今生、忘了曾经 提交于 2021-02-10 16:17:08
问题 I am playing with creating a family tree in D3 from scratch, and I am having trouble getting the nodes of my graph to be assigned to the corresponding birth year. I have the axis placed underneath the tree map, but would like to see the nodes having different link lengths. WIP fiddle JS: var familyTree = {'name':'Child', 'born':1990, 'parents': [ {'name':'Father', 'born':1970, 'parents': [ {'name':'GrandMother1', 'born':1950}, {'name':'GrandFather1', 'born':1940}]}, {'name':'Mother', 'born'

dc.js: stacked barchart cant display

由 一笑奈何 提交于 2021-02-10 13:12:23
问题 I'm making a stacked barchart using the Dimensional Charting javascript library dc.js, which is based on d3 and crossfilter. I am new in dc.js library. I am trying to display the stacked barchart using a csv file. I can't understand how to create a stacked barchart following the csv format. State_Name Age_19_Under Age_19_64 Age_65_84 AL 26.9 62.3 9.8 AL 23.5 60.3 14.5 NW 24.3 62.5 11.6 NW 24.6 63.3 10.9 BR 24.5 62.1 12.1 BR 24.7 63.2 10 GH 25.6 58.5 13.6 GH 24.1 61.6 12.7 KS 24.8 59.5 13.5 i

dc.js: stacked barchart cant display

由 和自甴很熟 提交于 2021-02-10 13:11:31
问题 I'm making a stacked barchart using the Dimensional Charting javascript library dc.js, which is based on d3 and crossfilter. I am new in dc.js library. I am trying to display the stacked barchart using a csv file. I can't understand how to create a stacked barchart following the csv format. State_Name Age_19_Under Age_19_64 Age_65_84 AL 26.9 62.3 9.8 AL 23.5 60.3 14.5 NW 24.3 62.5 11.6 NW 24.6 63.3 10.9 BR 24.5 62.1 12.1 BR 24.7 63.2 10 GH 25.6 58.5 13.6 GH 24.1 61.6 12.7 KS 24.8 59.5 13.5 i

Certain Objects in DOM do not seem to render despite being in the HTML source?

由 房东的猫 提交于 2021-02-10 12:47:39
问题 I'm quite new to web dev, and I've encountered the following odd issue. While using d3.js (specifically this script), I've been trying to add some other features. I've added a feature in my javascript code that adds a simple <p> to the DOM, and when I render it on my website and inspect source, I see it is indeed there. Here is a subset of the relevant HTML: <g class="node" transform="translate(180, 37.5)" style="stroke: rgb(128, 128, 128);"> <circle class="node" r="10" id="node_2" cursor=

Certain Objects in DOM do not seem to render despite being in the HTML source?

由 喜你入骨 提交于 2021-02-10 12:45:53
问题 I'm quite new to web dev, and I've encountered the following odd issue. While using d3.js (specifically this script), I've been trying to add some other features. I've added a feature in my javascript code that adds a simple <p> to the DOM, and when I render it on my website and inspect source, I see it is indeed there. Here is a subset of the relevant HTML: <g class="node" transform="translate(180, 37.5)" style="stroke: rgb(128, 128, 128);"> <circle class="node" r="10" id="node_2" cursor=

Sortable bar chart in d3 v4

由 我只是一个虾纸丫 提交于 2021-02-10 07:29:27
问题 I am trying to take Mike Bostock's Sortable Bar Chart code and convert it to a horizontal bar chart. https://bl.ocks.org/mbostock/3885705 My bar chart appears just fine but the console gives this error message whenever the input is clicked: Uncaught ReferenceError: data is not defined at HTMLInputElement.change (test3.html:168) at pt.each (d3.v4.min.js:2) at test3.html:161 I have a feeling this is related to my using v4 of d3 rather than v3 but I'm not really sure. Here's the whole script:

d3 based multiple sub groups of a bar chart

由 孤街浪徒 提交于 2021-02-10 06:10:24
问题 I am trying to produce a bar graph that has multiple hierarchical / groupings of factors using d3.js . An example from excel of what I am attempting to create, subgrouped by Variety and Irrigation treatment: I have searched for quite some time and have yet to see an example of something like the example graph above. The closet I found is this (as well as this, this, and this). but they all lack the one more level of grouping that I need. Is there a way to create multiple groupings in d3.js ,
订阅 d3.js