learner learner - 2 months ago 9
Javascript Question

d3js svg not visible in chrome

I am using two svgs in my code. One is using HTML, another is using d3:

<svg>
<circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/>
</svg>

var svg = d3.select("body")
.append("xhtml:div")
.append("svg")
.attr("width",500)
.attr("height",50)
.attr("fill","yellow")
.attr("stroke","orange")
;


The first one is showing, second one is not.

Answer

Is that your actual code? d3 is JavaScript, you need script tags if you are embedding it in HTML. Also, the SVG element does not have a fill or stroke attribute. You should style it like any conventional html element using CSS.

<script src="//d3js.org/d3.v4.js"></script>

<svg>
  <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00" />
</svg>

<script>
  var svg = d3.select("body")
    .append("xhtml:div")
    .append("svg")
    .attr("width", 500)
    .attr("height", 50)
    .style("background-color", "yellow")
    .style("border", "2px solid orange");
</script>