Home/ Questions/Q 8924105
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T07:19:13+00:00

I’m using the D3 javascript library to render some basic web charts. I want

  • 0

I’m using the D3 javascript library to render some basic web charts. I want to add three <path> elements to an <svg> block, but D3 is adding the elements to the end of the <html> block instead. Here’s the complete html source:

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="d3.v2.js"></script>
<script>
var chartData = [ 1, 2, 3 ];
d3.select("html").select("body").append("svg")
  .data(chartData, function(d) { console.log("data d:", d); return d; })
  .enter()
    .append("path")
      .attr("d", function(d) { return d; });
</script>
</body>

Chrome’s developer console shows the resulting html to be:

<html><head><meta charset="utf-8">
<style type="text/css"></style></head><body>
<script src="d3.v2.js"></script>
<script>
var chartData = [ 1, 2, 3 ];
d3.select("html").select("body").append("svg")
  .data(chartData, function(d) { console.log("data d:", d); return d; })
  .enter()
    .append("path")
      .attr("d", function(d) { return d; });
</script><svg></svg>
</body><path d="1"></path><path d="2"></path><path d="3"></path></html>

The <svg> block was created, but for some reason, the <path> blocks are outside of it. How can I correct this error, and put them inside the <svg> where they belong?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First off, you should have a high-level variable that only refers to the svg. Secondly, you should specify the height and width of the SVG when creating it. You don’t need to specify a select of html, so:

    var width = 400,
    height = 300;
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

    Now you can use the svg variable to append paths. It is recommended that you group the paths together (hence the "g" appended first). And you should also do a selectAll for paths, because you want to bind the data you are adding to the path elements. So:

    svg.append("g").selectAll("path")
    .data(chartData)
  .enter().append("path")
    .attr("d", function(d) { return d; });

    I recommend the D3 tutorials here: http://alignedleft.com/tutorials/d3/

    • 0