How to make seperate file of d3.js pie chart and load it to html page

Question

I pasted that code to jack.js file

     <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
        <script type="text/javascript">
        //Width and height
        var w = 300;
        var h = 300;
        var dataset = [ 5, 10, 20, 45, 6, 25 ];
        var outerRadius = w / 2;
        var innerRadius = 0;
        var arc = d3.svg.arc()
                        .innerRadius(innerRadius)
                        .outerRadius(outerRadius);

        var pie = d3.layout.pie();
        var color = d3.scale.category10();
        var svg = d3.select("body").append("svg").attr("width", w)
                    .attr("height", h);     
        var arcs = svg.selectAll("g.arc").data(pie(dataset)).enter()
                      .append("g").attr("class", "arc")
        .attr("transform", "translate(" + outerRadius + "," +outerRadius + ")");
                   arcs.append("path").attr("fill", function(d, i) {
                return color(i);})
              .attr("d", arc).on("mouseenter", function(d) {
              //console.log("mousein")
              text = arcs.append("text").attr("transform", arc.centroid(d))
              .attr("dy", ".5em").style("text-anchor", "middle")
              .style("fill", "blue").attr("class", "on")
              .text(d.data.place);})
              .on("mouseout", function(d) {
             text.remove();});
            //Labels
             arcs.append("text").attr("transform", function(d) {
                return "translate(" + arc.centroid(d) + ")"; })
            .attr("text-anchor", "middle").text(function(d) {
                return d.value;
            });</script>

and linked it to my html page.

Problem: This jack.js file is not showing pie chart in HTML page. can any body suggest me what should I need to do?

you need to refer ` ` in html file also. then it will work. – Manjunath Siddappa Nov 21 '14 at 04:15 — Manjunath Siddappa, Nov 21 '14 at 04:15
@ManjunathSiddappa I did that but it did not work! – Rohitz -zust stay here Nov 21 '14 at 05:46 — Rohitz -zust stay here, Nov 21 '14 at 05:46

score 1 · Accepted Answer · answered Nov 21 '14 at 05:51

1

Is this the behavior you wanted? plnkr

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>

  </head>

  <body>
    <script type="text/javascript" src="jack.js"></script>
    <h1>Hello Plunker!</h1>
  </body>

</html>

answered Nov 21 '14 at 05:51

huan feng

7,307
2
32
56

Here shares an good article discussed about where to put the script tag better, http://stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-html-markup, i'm enjoying it. :-D – huan feng Nov 21 '14 at 06:04

How to make seperate file of d3.js pie chart and load it to html page

1 Answers1