score:0
in your example, d3.chord()
computes the layout of the data. it's important to note that, in d3, "layout" has a different meaning of layout in data visualisation: here, layout has to do with preparing the data to create a given chart (not the visual "layout" of the chart).
basically, d3.chord()
takes your data matrix and creates another data matrix with a bunch of starting angles and ending angles, associating sources to targets.
after d3.chord()
modifies the data, they are passed to d3.ribbon()
. d3.ribbon
is the real path generator, creating the actual path that will be painted in the svg. how does it knows the data? you have previously bounded the modified data to your group:
.datum(chord(matrix));
that's the data passed to d3.ribbon()
.
according to the api, d3.ribbon()
...
...generates a ribbon for the given arguments. the arguments are arbitrary; they are simply propagated to the ribbon generator’s accessor functions along with the this object [...] with the default settings, a chord object expected.
Source: stackoverflow.com
Related Query
- Confused about binding chord data to ribbon path
- Losing Data Binding When Creating Path
- Confused about data joins, select and selectAll
- Confused by data binding and selecting specific data
- D3.js binding an object to data and appending for each key
- Manipulate elements by binding new data
- Pass null values to SVG path (using d3.js) to suppress missing data
- D3.js - JSON data array is binding the same array element to everything
- D3 Data Binding - When to put brackets around data
- Map function in D3, confused about multiple functions passed in
- D3 and two-way data binding
- Sort data for d3.js path
- D3: "SVG4601: SVG Path data has incorrect format and could not be completely parsed."
- Understanding D3 data binding key accessor
- Binding data not working in d3.js
- d3 nested variable data binding
- Binding data to each element using HTML textarea
- d3 multiline update path and transition path does not work with nested data
- Mouseover issues in D3.js, containing Path elements and changing tooltip data once focus is brushed?
- d3.js: binding data to existing svg. what selector.each does?
- Have gaps in a SVG path when there is no data
- d3 data binding not creating child elements using join
- d3.js : attribute setting not working after binding data and entering elements
- Data binding in D3 fails when using "cloned" data
- How to get SVG path data of TopoJSON feature without adding it to the DOM?
- Getting NaN values in svg path 'd' attr when trying to map geojson data
- I am trying to use multiple 2 arrays for binding data for svg circles but cannot figure out how
- Create axes using data binding in d3
- How to improve my simple nested data binding in d3?
- Adding a new path when the updated data has additional sections
More Query from same tag
- Plotting points on a map with D3
- Histogram with ordinal data
- How to differentiate inner and leaf (final) nodes in a D3 dendogram
- Why do these 9 U.S. cities not correspond to their actual locations on a D3 map when I plot them using long/lat with an Albers USA projection?
- Can I represent a hierarchy in d3 without nesting DOM elements?
- Responsive SVG not working correctly?
- bind svg gradient based on data d3.js
- Using the force-layout physics for seperated elements
- Two csv http URL data same chart in D3
- dimple js pie chart
- Mapping data with topojson and D3
- d3js multigraph auto update
- d3.js-equivalent of jQuery's $(selector).map(fn)
- Difference between angularjs-nvd3-directives vs angular-nvd3
- using d3.js to store a svg line chart as an image on the client side
- SVG path doesn't seem to orientate itself correctly
- Unable to re-use transitions
- D3.js heatmap with color
- javascript D3: how to remove an entire script via d3 or javascript
- Disable Zoom but Preserve Pan in D3 Observable
- d3.rebind in D3 v4
- Get width of d3.js SVG text element after it's created
- How animate D3 SVG bezier line for subtle wave effect
- d3js filtering out the old data
- D3 nested objects should be different colors
- d3.js updating axes with new data
- How to make a tiled image pyramid for leaflet from a non-geographic source
- d3 pie chart with flask server
- d3: use anchor elements as chart labels
- having issues getting a circle to change colors using hover in d3