CODEWITHSUNDEEP
javascriptsvgd3.jsdimple.js
Shoaibkhanz
Shoaibkhanz

Reputation: 2082

D3 Coding Order

I am not clear about the pattern in which a D3 code must be written.

for e.g In the below code snippet, If I mention the 3rd section(Chart Title) of the code after creating the svg element my chart doesn't show the title text but If i mention the 3rd section before creating the svg it simply works.

Why ?

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

<style>

    circle.dimple-series-1{
    fill: red;
    }    

    h2{
    color: black;
    text-align: center;
    font-family: monospace;
    font-size: 20px;
    }   

    </style>

  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
    <script type="text/javascript">
      function draw(data) {

      /*
        D3.js setup code
      */

          "use strict";
          var margin = 75,
              width = 1400 - margin,
              height = 600 - margin;

          /*TITLE*/

          d3.select("body")
          .append("h2").text("Goals by Year!");

          /*Creating SVG*/

          var svg = d3.select("body")
            .append("svg")
              .attr("width", width + margin)
              .attr("height", height + margin)
            .append('g')
            .attr('class','chart');

      /*
        Dimple.js Chart construction code
      */

          var myChart = new dimple.chart(svg, data);
          var x = myChart.addTimeAxis("x", "year"); 
          x.dateParseFormat="%Y"
          x.tickFormat="%Y";
          x.timeInterval= 4;
          myChart.addMeasureAxis("y", "attendance");
          myChart.addSeries(null, dimple.plot.line);
          myChart.addSeries(null, dimple.plot.scatter);


          myChart.draw();
        };
      </script>
  </head>
<body>
  <script type="text/javascript">
  /*
    Use D3 (not dimple.js) to load the TSV file
    and pass the contents of it to the draw function
    */
  d3.tsv("world_cup.tsv", draw);
  </script>
</body>
</html>

Upvotes: 0

Views: 99

Answers (1)

John Kiernander
John Kiernander

Reputation: 4904

Your title is not added to the svg. You are appending a heading object to the body. The only reason I can think it wouldn't appear once you have added the SVG is because it is being added after it in the DOM so might be out of sight? It depends on your CSS, but I'm fairly sure the element will still be added.

In the first case your DOM will look like this:

<body>
    <h2>Goals by Year!</h2>
    <svg>
       <... Dimple Stuff ...>
    </svg>
</body>

and in the second case like this:

<body>
    <svg>
       <... Dimple Stuff ...>
    </svg>
    <h2>Goals by Year!</h2>
</body>

If you want to add your title to the SVG itself you need to use SVG shapes and you need to target the SVG instead of body. E.g:

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

svg.append("text")
    .attr("x", 100)
    .attr("y", 100)
    .style("fill", "black")
    .text("Goals by Year!");

... Dimple Stuff

In this case your DOM will look like this:

<body>
    <svg>
       <text x=100 y=100 style="fill:black">Goals by Year!</text>
       <... Dimple Stuff ...>
    </svg>
</body>

Edit: Removed note. Dimple seems fine with using a group inside the svg.

Upvotes: 1

Related Questions