score:1
problem
your problem has to do with this code
legend
.append("text")
.attr("x", width + 85)
.attr("y", function (d, i) {
return i * 20 + 9;
})
// .attr("dy", "0.32em")
.text(
words.map(function (d, i) {
return d.key; // list of words
})
);
you are appending only a single text element and in the text function you are returning the complete array of words, which is why all words are shown.
solution
create a corresponding text element for each legend rectangle and provide the correct word. there are multiple ways to go about it.
you could use foreignobject to append html inside your svg, which is very helpful for text, but for single words, plain svg might be enough.
i advise to use a g element for each legend item. this makes positioning a lot easier, as you only need to position the rectangle and text relative to the group, not to the whole chart.
here is my example:
let legendgroups = legend
.selectall("g.legend-item")
.data(words)
.enter()
.append("g")
.attr("class", "legend-item")
.attr("transform", function(d, i) {
return `translate(${width + 65}px, ${i * 20}px)`;
});
legendgroups
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", 10)
.attr("height", 10)
.style("fill", function (d) {
return color(d.key);
});
legendgroups
.append("text")
.attr("x", 20)
.attr("y", 9)
.text(function(d, i) { return words[i].key; });
this should work as expected. please note the use of groups for easier positioning.
Source: stackoverflow.com
Related Query
- How do I match up text labels in a legend created in d3
- How to properly get text width to center labels above graph bars?
- How to match text width to circle size in D3 circle pack
- How do I hide the text labels in d3 when the nodes are too small?
- How to properly rotate text labels in a D3 sunburst diagram
- How to add a legend and labels to the pie chart?
- How to word wrap the legend text for a donut chart
- How to Hide Overlapping Text of Labels in D3 Zoomable Pack Layout?
- How to move text labels in transition
- How to change text color of legend in d3js graph?
- how to align text and labels in D3
- How can I dynamically update text labels in d3?
- How can I rotate my text labels so they can't go upside-down (SVG)?
- NetworkD3 Sankey Plot in R: How to switch text labels from the right to the left of the inner nodes only
- How to position text labels on a Sunburst chart with d3.js
- How to customize legend text in pie chart for angular-nvd3?
- How can I wrap long text labels with D3.js?
- How to rotate text labels in a D3 x-axis?
- How to word wrap legend labels in d3
- How to color the text labels individually on an axis in d3?
- How to center align text labels on bar chart using d3js
- How to rotate the text labels for the x Axis of a nvd3.js line chart
- How to append text labels to their respective circles in a horizontal legend?
- How to append text dynamically after rect has been created
- how to correctly place the text labels in d3.js?
- How to shrink Text Labels and add attributes to hover info-window in D3 bubble chart?
- D3 - How can I show/hide a text element when hovering a circle element created from different attributes of the same data entry?
- how to change text angle for labels in D3.js?
- How to reduce the spacing between Legend rect and Legend Text in dimple.js
- How to add non-overlapping polylines and text labels to 3D pie chart using d3.js?
More Query from same tag
- parsing a date in D3.js with hours, mins and seconds
- How to add more ticks to D3 timeline charts
- Zoom function in d3js Scatter plot chart
- d3.js: How to convert edges from lines to curved paths in a network visualization by drawing a quadratic Bezier curve?
- Why doesn't Internet Explorer show foreignObject?
- D3js Use element's current color in tooltip
- How can I add a background colour behind PNG, when image URL is pulled from my D3.js dataset?
- D3 Geo Tile Baselayer Offset
- D3.js shape gets translated in display after transition as if coordinate system had changed
- Handling Different Child Object Names Recursively
- D3 line chart giving wrong values at highest number
- Broken code upgrading to d3.js v4.0
- Customized tooltip for C3JS
- Using d3.js with Apache Zeppelin
- Visualization of random data
- How to smooth two curves at joint point in d3.js v4?
- why is arc labels blurred in my d3js pie chart?
- d3js - on `path` over how to show the `path` values instead of showing the `mouse` value?
- Create a D3 Bar Chart Using a Object
- Magnifier effect for D3/GraphGL force directed network visualization?
- max and min values from json in d3
- D3 V4 zoom via mouse and programmatic are zooming independent from each other
- Modifying node and edge properties in d3.js
- D3.js: Why are my legend tick marks' text disappearing?
- d3v4 scatterplot - fixing the domain adding animations
- Uncaught Error: [$injector:unpr] Unknown provider: $animateProvider
- Using D3 axis functionality on a canvas
- Conflict in transitions
- Highlighting child nodes in D3js v4
- adding mouseover event to d3.js bar chart