This is because there are a lot of
g elements on the page already when you run this code -- some of them added by you, some of them added by D3 when you call the axis component. There are however no
rect elements, so that code works.
There are several ways around this -- you can either run the code that binds the data to the
g elements first, add axis and chart in separate
g elements, add a class to the
g elements that you're binding the data to, or any combination of these.
Some more background and examples in this tutorial.
not sure what you want, but:
if you want something like:
svn g //one g for every data row g //y axis g //x axis
then something like this should work:
var chart = svg var chartLines = chart .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") .attr("class", "line"); // setup chart axis. chart.append("g") .attr("class", "x axis") .call(xAxis); chart.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text(yLabel); // Pertinent code here var rows = chart.selectAll(".line").data(data).enter().append("g");
- Importing local json file using d3.json does not work
- Svg clip-path within rectangle does not work
- d3.transition().attr('x', y) does not work when d3.attr('x', y) does
- d3.on("mouseover") event does not work with nested SVG elements
- d3.tree => transform does not seem to work
- Brushing on ordinal data does not work
- d3 zoom on scroll does not work anymore on Chrome
- d3 multiline update path and transition path does not work with nested data
- Selection does not work if "too exact"
- bisectLeft function does not work if the second parameter is numerical
- The mouseover event for D3.js does not work in Leaflet
- Transition duration does not work on page refresh
- d3.js: styling <text> does not work
- Transition and opacity does not work well together
- Interactive update does not work in heatmap
- Data Join with Custom Key does not work as expected
- d3 .tsv file does not work
- Why does this code work for counting one item in a list but not the others?
- d3 js transition over the array of rectangles does not work
- d3.js node translation does not work when changed the node to image
- Simple function does not work within if-statement
- d3js does not enter into line function
- embedding an image via d3 does not work
- d3 svg zoom does not work when neighbouring element exists
- Constructed SVG does not work where HTML-drawn does
- Updating the table multiple times using D3 does not work
- order a capped chart with fake group does not work in dc.js
- Force simulation of texts on bubble-chart does not work
- D3 JS - Making a Polygon Draggable using hard coded Bounding Box Attributes Does Not Work
- For loop does not work in D3.js
More Query from same tag
- D3.js V5 - Why is my bar chart axis not scaling?
- D3 stacked bar graph, with each stack a different colour set by the different groups,
- Use D3.js to find Centroid of SVG Path
- d3.json does not load file from App_Data folder of ASP.NET MVC
- How do I use Express and Ampersand simultaneously?
- Added image to DOM element in d3 but now it won't transition
- d3js - my line graph not working, and throws error
- dynamically giving input to date format for parsing D3.js
- D3 and TopoJSON will not load in browser
- D3.js contour plot not working (Possible bug of d3 contour)
- How to import list-like data into d3?
- D3.js force. custom color
- trouble accessing max of nested object data for use in a domain in D3
- Specifying Ticks on D3 Bar chart with Time Series data and scaleBand
- How to Import Plottable.js
- How to create a d3.js legend with both solid and dashed elements
- JSON returned null value or undefined in jsp page
- Is it possible to show a message text on the chart of Billboard.js?
- How to prevent/minimize reflows for this d3 example?
- Crossfilter - Loading a JSON file from localStorage
- What are invalid values when setting style properties in IE9?
- Sankey D3.js sankey.link is not a function
- How do I get data to show up in my graph?
- How can I plot positive and negative values for both axes in a scatter plot with d3?
- Back to path style color on click in d3.select(this)
- d3 Select and modify g elements within svg elements
- Resize SVG contents based on the result of rendering
- D3: Transition Treemap and retain original group sizing
- DimpleJS - how to animate graph and download the graph
- Wrapper in Backbone View cannot be parametrized in order to work with d3.js