score:5
you're asking to select based on the value of the style
attribute. the fill
property is nested within the style attribute; it is not a direct attribute of the dom node. so you won't be able to select it using an attribute selector (ie the method @larskotthoff linked to).
you can switch to setting the fill using the svg fill
attributes, .attr('fill', ...)
instead of using style('fill')
, which will allow you to later select it using an attribute selector.
that aside, selecting via the fill attribute doesn't seem too elegant. if your design evolves and you start using a different fill color, you'll have to change the attribute selector as well. assigning it a class and selecting based on the class is more appropriate.
perhaps the best is to select based on data. eg:
g.selectall('circle')
.filter(function(d) { return d.artistid == 1; })
.style('fill', function(d, i) {
// here you can affect just the red circles (bc their artistid is 1)
})
Source: stackoverflow.com
Related Query
- How to select elements according to an attribute(fill color) in D3.js with SelectAll
- How do I remove all children elements from a node and then apply them again with different color and size?
- How to update the fill color on existing svg elements with d3.js?
- How to select DOM elements with number value id using D3
- How to select all elements with a class that contains a str?
- How to select multiple selectors with selectAll?
- How to select a d3 svg path with a particular ID
- How to change line color in d3js according to axis value?
- How to move elements along with svg group
- How can I color ocean with topojson in d3 when I have coordinate info for land?
- How can D3 select multiple shapes with shared attributes from a group?
- How to pick elements in d3 with a specific property value
- D3.js how to transition in opposite direction with basic SVG elements
- Progress bar: how to make color transition according to the progress?
- How to use D3 force layout with existing SVG elements as nodes
- How do you translate HTML elements along with SVG elements when zooming and panning with D3
- How to select and deselect a svg line and change its color on selection and deselection using d3.js and javascript , jquery?
- How to select first two elements in d3 and apply transition to them?
- How to color different data sets with different colors in dimple.js
- How to add links from CSV file to SVG elements generated with D3?
- how to map numbers to a three color scale with D3.js?
- d3: How to append nested elements on enter()? My elements get appended, but subsequent select doesn't see them
- d3.js: How to populate cells with color for blank values?
- How bind color with data in D3.js?
- How to create elements (links) with 2 or more colors with CSS to make it look like a rainbow?
- D3 how to select text elements given a specific id attribute
- How to create a d3.js legend with both solid and dashed elements
- D3 Line Chart- Adding line interactivity: How to get id's and select a line with each?
- How can we add legend's value beside of legend with proper alignment and different color in dc.js
- How to prevent duplicating nested elements on update with D3.js
More Query from same tag
- D3 mouseover effect for each chart on one page
- Can one specify a custom force function for a force-directed layout?
- X axis domain line overlapping with d3 bar stroke
- Better way to convert JSON to arrays for graphing timeseries in C3?
- Add multi color gradient for different points in d3.js
- D3, tooltip position, when viewBox is applied
- d3-transition attrTween, styleTween methods are not getting triggered in d3 version 4
- Error Cannot read property 'getBoundingClientRect' of null in d3-gantt charts
- displaying charts in browser while keeping data safe
- D3 Group on nested array of objects
- How to keep a crosshair out from the margins in d3.js?
- Dynamically Add/Remove Lines in d3 (v4) Line Chart
- D3: combine circles and images
- Selecting SVG with D3
- d3 transition for transform translate not working for DIV
- How to transform code from a tsv import to direct data
- Force-directed graph reusability failure?
- Let's make a TopoJSON map and view it with D3.js
- Adding all axis labels to a d3.js graph
- Different approach to prevent too much nesting of functions
- D3 d3.text request function bug
- Updating a D3 pie chart correctly
- trying to rotate a globe in d3, centering on a particular country
- Pass D3.js data based on ID specified in data
- How to create x-axis with duplicated string values in d3js?
- Fix tooltips on horizontal bar chart d3.js
- Add text label to d3 node in Force layout
- d3.js gives NAN in transform line
- D3 map, 'd' attribute
- How to fix the configuration of the nodes that are returned? (D3, Javascript, Neo4j)