score:73
update (july 8th 2016) this answer applies to d3 v3.x — not v4.x. for the latter version, see tim hayes's answer, also on this page. or... just swap attr
with attrs
in my answer below, and don't forget to require/import/script-embed d3-selection-multi
. and... don't miss the bit about using .each
, which may be useful to you.
yeah, it's possible by passing in a hash (like jquery's css()
method):
d3.select('body').append('svg').selectall('circle')
.data(data)
.enter().append('circle')
.attr({
cx: function (d) { return d.x; },
cy: function (d) { return d.y; },
r: function (d) { return d.r; }
});
this works for style()
as well.
if the reoccurring function (d) {}
start to feel like too much, this is another approach:
d3.select('body').append('svg').selectall('circle')
.data(data)
.enter().append('circle')
.each(function (d) {
d3.select(this).attr({
cx: d.x,
cy: d.y,
r: d.r
});
})
note: this feature only exists in d3.js v2.10.0 or higher
score:73
this is an old post, but i found it while googling around for an answer. the accepted answer no longer works in d3 v4.0.
moving forward, you can do the same by using the attrs()
method. but attrs()
is only supported if you load the optional d3-selection-multi script.
so using the example above, it would look like this in d3 v4.0:
// load d3-selection-multi as separate script
<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
d3.select('body').append('svg').selectall('circle')
.data(data)
.enter().append('circle')
.attrs({
cx: function (d) { return d.x; },
cy: function (d) { return d.y; },
r: function (d) { return d.r; }
});
Source: stackoverflow.com
Related Query
- How to set multiple attributes with one value function?
- d3 set multiple attributes with one function
- How to set cx and cy with only one function using d3.js, force and network?
- How can D3 select multiple shapes with shared attributes from a group?
- Enter() statement with a function from one data array to multiple arrays? (Adding multiple Gradient Paths)
- How to fix d3 parsing error when using function and return value to set "d"?
- How to set default value appearing in dropdown list with D3?
- How to set up custom color scale with multiple sub-parts in D3?
- How to create one group with multiple dimension on dc.js
- How can I properly aggregate / group multiple line graphs into one overall graph with d3.js when the x-values aren't matching exactly?
- D3. How do I use a function to set more then one attribute using the .attr method
- D3.js how to extract Y domain value from data array with multiple Y axis columns
- How to Create/Show Multiple Iterations of Charts with the same data in One Area with Buttons using D3.js
- how to set up the scale of yAxis in D3.js with a csv file with multiple columns
- d3 add multiple classes with function
- How to select multiple selectors with selectAll?
- How to use D3 selectAll with multiple class names
- D3.js How to apply multiple classes when using a function
- how do you set a fixed link distance with d3 v4
- how to get dynamic value of input element with d3?
- How can I show a graph using d3 force layout with initial positions set and no movement at all?
- How to make data() key function to work with TypeScript?
- How to create stacked row chart with one row with dc.js?
- How to show a tooltip with value when mouseover a svg line graph using d3.js?
- How to throttle function call on mouse event with D3.js
- How to replace a d3js nest function with group and rollup
- How To Move (Drag and Drop) multiple Shapes with D3
- With D3, how can I set attribute ("fill", "none") of axis path and line, but not text (without editing stylesheet)
- How to pick elements in d3 with a specific property value
- How to create slow simultaneous transitions of multiple attributes in force directed graphs?
More Query from same tag
- d3v4 bubble chart update
- Getting data at run time, from a text box for example
- Pass null values to SVG path (using d3.js) to suppress missing data
- D3 charts and JSON
- Angular 7 integration with D3: adding click listener throws error
- Transition between a circle and a line with svg and d3
- d3 geo projection transitions from orthographic to X
- d3 v4 - zoom with buttons in conflicts with zoom behaviour
- D3 - data format required for cal-heatmap calendar heatmap?
- D3 Loading in CSV file then using only specific columns
- Change the x axis width dynamically
- svg elements being clipped
- How can on make a static force graph in D3.js V4?
- Cube/Mongo: Custom metric resolutions (step)
- Generate Gradient Colors for Nodes in Sankey Charts
- How can I figure out what button was clicked on last?
- getting json data with d3.json() from php not working
- D3 V4 Sunburst diagram layout arc calculation
- D3.js TopoJSON map of Brooklyn not rendering
- D3 scale fails if first value is different than zero
- use any curve to connect two certain points with certain link length using javascript of its library such as d3
- C3js horizontal bar chart labels cut off and sizing issue
- Map X-values to a Date in d3.time.scale()
- How to do partial fill in D3?
- how to correctly place the text labels in d3.js?
- D3.js ~ placing rectangles with for loop and coloring them
- d3.js Horizontal bar graph - keeping Y axis in the middle of the graph
- D3 it is possible to change projection
- d3 word cloud - words out of bounds
- How to show tooltip by data index on d3js charts? (with no mouseover event)