score:3
Accepted answer
the problem is you're not using the data
bound to each rectangle, but instead looping over all the colors each time. try something like this:
svg.selectall("rect")
.data(colore.range()).enter()
.append("rect")
.attr("fill", function (color){ return color; })
.attr("x", function (color, index){ return (index * 12) + "px"; })
.attr("y", margin - 8 + "px")
.attr("width", 8 + "px")
.attr("height", 8 + "px");
the key thing to note is that if you can pass an attribute a function that takes an object and an index as arguments that will then get applied to each datum. using this approach, i get this:
Source: stackoverflow.com
Related Query
- D3.js ~ placing rectangles with for loop and coloring them
- How do I remove all children elements from a node and then apply them again with different color and size?
- D3: Create a continuous color scale with many strings/inputs for the range and dynamically changing values of the domain
- MultiBar chart with nvd3 / d3 only shows labels for every other tick on the x-axis. How can I get them all to show up?
- Special donut chart with different rings/arcs for positive and negative values
- How can I plot positive and negative values for both axes in a scatter plot with d3?
- Mix bar and line charts with Rickshaw (d3 based graphing library for js)
- How to check d3 js force graph for nodes with no links and remove them?
- How do I implement d3's enter update exit pattern for an area chart with focus and context?
- D3.js: Set fitExtent or fitSize (or center and scale programmatically) for map with multiple geoJSON files
- Error in A Simple D3 Line chart with Legend and Tooltips for D3v 3.5.13
- D3 - How to loop through an object with keys for a bar chart
- Data structure for a family tree with multiple partners and siblings?
- D3 adapt force layout for tree structure with additional parent and sibling paths
- Where to store remote data in Svelte for responsive data vizualisations with Svelte and D3 (best practices)
- How do I replace a node with an image using D3 and CoffeeScript for a network visualization?
- Placing elements on circle line and rotating them towards the center using D3.js
- How to reset svg scaling and fit to screen for random but large maps/datasets with different orientations
- How to display d3 bubbles in different colors for a dataset with one branch and many children?
- Add small rectangles inside BIG rectangles with unique Ids and links in D3? after an specific ID
- How can i bind an json data with a key and Name for display
- D3 Tree layout: How to fill rectangles with text, but have them in uniform size?
- D3 Bar Chart with Variable X and Y(variable width and height for bars)
- d3 multi line with mouse over cursor for both y AND x value
- geoJSON projection with d3.js and dc.js for South Africa and provinces
- Multiple series in dimple.js with user selecting data for y1 and y2 axis
- Problems when interactively resizing and moving svg rectangles with D3
- D3.js enter() broken for svg shape animation but updates and removes them fine
- Drawing 100 circles with IDs and associating mouse events with them
- How do you add rotation logic for mobile devices upon dragging on a 3d globe with D3.js and html canvas
More Query from same tag
- D3.js and dragdealer JS
- D3 Format Days to Years
- How can I use D3 tree data in the VEGA Api?
- d3.js loop number as variable for
- NVD3.js (d3.js) Scale Break
- How to test interactivity of React component using D3 select()?
- How to blink nodes after successfully get position of nodes?
- Cannot read property 'length' of undefined in a pie chart
- dc.js Bubble Chart, plotting bubbles along the x-axis timeline
- Basic d3 polyline flash-shape svg animation
- make d3 force static layout more quickly
- D3 Line Chart Mouseover Coordinates Effect
- D3.js Stacked Bar Chart Selects
- responsive word cloud with D3.js
- Transitioning Node Circle Colors in D3 Tree Visualization
- How to display value labels above graph bars?
- How to change color scheme?
- d3.event.pageX & d3.mouse(this)[0]
- d3.js scaleTime is returning undefined
- Server-side vs. Client side computations
- how to configure dc.bubbleOverlay(): min and max radius, text in bobble
- Best way to plot Points on Map using D3.js
- JS / d3.js - Removing/merging duplicate links in d3.js node graph
- How do I tell d3 to not repeat values in ticks?
- Shorten SVG path arc by pixel
- Creating unique scales for parallel coordinates using d3 (multivariate)
- Zoomable Circle Packing with Chord D3
- Error: Uncaught TypeError: Cannot read property 'linear' of undefined
- D3 expand force network by clicks - not working
- d3.js CSV to HTML Table - Header, Average & chart