score:2
Accepted answer
just three problems:
you are repeating the
enter()
function:var f_sel = svgtopitems.selectall("g") .data(topdata,function(d){ return d.item_name; }).enter(); //this is an enter selection... var f_ent = f_sel.enter().append("g"); //and you have enter() again here
so, remove the first
enter
:f_sel
should be just the data-binding selection.move your merged selection to before appending the rectangles
your
translate
has an extra parenthesis:return "translate( 0, "+ i*25 +")" + ")";
with that problems corrected, this is your updated fiddle: https://jsfiddle.net/utf5hva2/
Source: stackoverflow.com
Related Query
- D3 seemingly updating wrong SVG element
- Updating SVG Element Z-Index With D3
- d3 SVG text element background-color with getBBox() wrong order
- How to access the DOM element that correlates to a D3 SVG object?
- How do I get the width of an svg element using d3js?
- Finding Offset Position of SVG Element
- D3 Selecting an element inside an SVG
- Append SVG canvas to element other than body using D3
- Get width of d3.js SVG text element after it's created
- D3 - Positioning tooltip on SVG element not working
- SVG element loses event handlers if moved around the DOM
- StopPropagation() with SVG element and G
- how to assign unique id to SVG text element in d3 javascript
- Fit Text into SVG Element (Using D3/JS)
- Fill SVG element with a repeating linear gradient color
- Cannot select SVG foreignObject element in d3
- How do you make an SVG element mouse event bubble up through another element?
- Can I move an SVG element between SVG groups, in d3.js
- D3 multi-line tooltip for SVG element
- mouseout/mouseleave gets fired when mouse moves INSIDE the svg path element
- Append foreignObject containing some HTML inside an SVG element
- Can I append a literal SVG element with d3?
- HTML element inside SVG not displayed
- adding padding to svg g element
- Sizing of SVG foreignObject element to fit HTML element
- programmatically trigger click event in svg rect element
- Get class of selected svg element in d3
- D3 updating graph with new elements create edges with the wrong nodes
- Do I add eventListener to every SVG element if I follow normal D3 way?
- D3 events firing on a hidden svg element
More Query from same tag
- D3.js Zoom and Pan to element on Click
- javascript take datetime input and filter list based on input
- How can I get this svg circle to appear above my d3 path and not below?
- How to draw square using area in d3.js?
- How to modify interpolation at end points for stacked area graph?
- d3.csv promise pending and getting its data
- Exit() is not working for d3 group bar chart
- Overlap of Elements in d3.js Word cloud
- Render HTML on X-Axis Ticks
- Can d3.js / JavaScript update a text value like in a chart?
- d3 bar chart obscured in firefox but not in chrome
- javascript d3 create datasets from one set of data
- D3.JS Vertical line separating year
- D3 arcTween - Updating transitions for multiple pie charts
- Why is my D3.js tooltip not working
- exit().remove() doesn't remove obsolete elements
- Limit drag movements to a circular SVG boundary
- D3.js Don't Overlapping line but linktext not show
- D3 Graph working in chromium, but not in other browsers
- How to draw a line graph using d3.js?
- handling dynamic data of large or small size in div of fixed width
- Collapse/expand child nodes of tree in d3.js?
- Generating custom elements in d3
- r2d3 + Shiny: can't render a local image in D3, despite being able to render one using an URL
- multiple d3 graphs in a single page
- Dimple.js Candlestick Chart
- AngularJS integration with D3.js
- Create additional D3.js symbols
- d3 how to properly pass request body in a post request?
- Combining Bivariate Graph with Line Graph in a single chart