d3.js

D3 Loading in CSV file then using only specific columns

由 血红的双手。 提交于 2021-02-08 03:54:16
问题 I've had a hard time getting two columns from a CSV file with which I am planning on building a basic bar chart. I was planning on getting 2 arrays (one for each column) within one array that I would use as such to build a bar chart. Just getting started with D3, as you can tell. Currently loading the data in gets me an array of objects, which is then a mess to get two columns of key-value pairs. I'm not sure my thinking is correct... I see this similar question: d3 - load two specific

Stop moving other nodes while dragging one node in D3 forceSimulation

由 本秂侑毒 提交于 2021-02-08 03:41:18
问题 I made a D3 forced-directed graph by d3.forceSimulation() and attached the drag function. While clicking one node, I don't want other nodes to move accordingly. Now I can freeze the node being dragged by setting the d.fx and d.fy as the following: function dragended(d) { if (!d3.event.active) simulation.alphaTarget(0); d.fx = d.x; d.fy = d.y; } Is it possible to freeze all the other nodes while dragging one node? 回答1: Thanks @rioV8 for the hint! I tried to fix the other nodes while dragging

D3 semantic zooming with Reusable Pattern

由 我与影子孤独终老i 提交于 2021-02-07 20:56:23
问题 I'm trying to implement semantic zooming while using Mike Bostock's Towards Reusable Charts pattern (where a chart is represented as a function). In my zoom handler, I'd like to use transform .rescaleX to update my scale and then simply call the function again. It almost works but the rescaling seems to accumulate zoom transforms getting faster and faster. Here's my fiddle: function chart() { let aspectRatio = 10.33; let margin = { top: 0, right: 0, bottom: 5, left: 0 }; let current = new

D3 semantic zooming with Reusable Pattern

由 怎甘沉沦 提交于 2021-02-07 20:54:16
问题 I'm trying to implement semantic zooming while using Mike Bostock's Towards Reusable Charts pattern (where a chart is represented as a function). In my zoom handler, I'd like to use transform .rescaleX to update my scale and then simply call the function again. It almost works but the rescaling seems to accumulate zoom transforms getting faster and faster. Here's my fiddle: function chart() { let aspectRatio = 10.33; let margin = { top: 0, right: 0, bottom: 5, left: 0 }; let current = new

D3 semantic zooming with Reusable Pattern

由 两盒软妹~` 提交于 2021-02-07 20:54:12
问题 I'm trying to implement semantic zooming while using Mike Bostock's Towards Reusable Charts pattern (where a chart is represented as a function). In my zoom handler, I'd like to use transform .rescaleX to update my scale and then simply call the function again. It almost works but the rescaling seems to accumulate zoom transforms getting faster and faster. Here's my fiddle: function chart() { let aspectRatio = 10.33; let margin = { top: 0, right: 0, bottom: 5, left: 0 }; let current = new

Wrapping long text in d3.js

由 人走茶凉 提交于 2021-02-07 19:51:00
问题 I want to wrap long text elements to a width. The example here is taken from Bostock's wrap function, but seems to have 2 problems: firstly the result of wrap has not inherited the element's x value (texts are shifted left); secondly it's wrapping on the same line, and lineHeight argument has no effect. Grateful for suggestions. http://jsfiddle.net/geotheory/bk87ja3g/ var svg = d3.select("body").append("svg") .attr("width", 300) .attr("height", 300) .style("background-color", '#ddd'); dat = [

Wrapping long text in d3.js

由 让人想犯罪 __ 提交于 2021-02-07 19:49:42
问题 I want to wrap long text elements to a width. The example here is taken from Bostock's wrap function, but seems to have 2 problems: firstly the result of wrap has not inherited the element's x value (texts are shifted left); secondly it's wrapping on the same line, and lineHeight argument has no effect. Grateful for suggestions. http://jsfiddle.net/geotheory/bk87ja3g/ var svg = d3.select("body").append("svg") .attr("width", 300) .attr("height", 300) .style("background-color", '#ddd'); dat = [

Change color on a map D3

由 ◇◆丶佛笑我妖孽 提交于 2021-02-07 14:51:47
问题 I'm a beginner in Js and I'm trying to change the color of a specific country (function colorCountry ) by its Id using D3.js. However, doesn't matter what color I choose. The result will always show the map highlighted in orange. What could I do to solve this? My code follows below. Thanks. The json file can be downloaded here - https://gist.githubusercontent.com/d3noob/5193723/raw/6e1434b2c2de24aedde9bcfe35f6a267bd2c04f5/world-110m2.json <!DOCTYPE html> <meta charset="utf-8"> <style> body {

D3 Force simulation in a grid

由 偶尔善良 提交于 2021-02-07 13:49:44
问题 I was wondering how it would be possible to modify Mike Bostock's example of a multi-force layout in order to try and get the force layout to group nodes in a grid. So let us imagine that we have the following csv: Name, Category1, Category2 1,1,1 2,1,2 3,1,1 4,2,2 5,3,1 6,1,4 7,5,5 8,1,5 9,2,4 10,3,3 11,4,4 12,4,5 13,3,4 14,1,2 15,1,1 16,2,2 17,3,1 18,2,1 19,4,5 20,3,1 For his kind of data I would like to have all the possible values of Category 1 as columns and all the possible values of

D3 Force simulation in a grid

由 拥有回忆 提交于 2021-02-07 13:49:03
问题 I was wondering how it would be possible to modify Mike Bostock's example of a multi-force layout in order to try and get the force layout to group nodes in a grid. So let us imagine that we have the following csv: Name, Category1, Category2 1,1,1 2,1,2 3,1,1 4,2,2 5,3,1 6,1,4 7,5,5 8,1,5 9,2,4 10,3,3 11,4,4 12,4,5 13,3,4 14,1,2 15,1,1 16,2,2 17,3,1 18,2,1 19,4,5 20,3,1 For his kind of data I would like to have all the possible values of Category 1 as columns and all the possible values of
订阅 d3.js