d3js svg not visible in chrome

Question

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 1

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>