D3.js not graphic

Question

D3.js not graphic

Navigation

#1 by (0 votes)

0

I have been working with D3.js and I am learning about it .., I made some simple graphs from the same HTML5 document successfully, the problem comes when I want to take all the jasvacript code to a javascript file and try to instantiate the created object , it does not present any error, however, it is not graphic.

Javascript code.

function dotChart() { 

    this.drawChart = function(uri_data) {  

    d3.json(uri_data, function(error, data){            

            keys = data.map((o) => {
                return Object.keys(o)
            }).reduce((prev, curr) => {
                return prev.concat(curr)
            }).filter((col, i, array) => {
                return array.indexOf(col) === i 
            }); 

      sum = 0;

      data.forEach(function(d){
        d[keys[1]] = +d[keys[1]]
        sum += d[keys[1]];
      });

      dotChart.X.domain(data.map(function(d){
        return d[keys[0]];
      }));

      dotChart.Y.domain([0, d3.max(data, function(d){
        return d[keys[1]]/sum;
      })]);

      dotChart.SVG.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0, "+ dotChart.HEIGHT + ")")
        .call(dotChart.X_AXIS);

      dotChart.SVG.append("g")
        .attr("class", "y axis")
        .call(dotChart.Y_AXIS);

      dotChart.SVG.selectAll(".dot")
        .data(data)
        .enter()
        .append("circle")
        .attr("class", "dot")
        .attr("r", 3)
        .attr("cx", function(d){
            return dotChart.X(d[keys[0]]) + 13;
        })
        .attr("cy", function(d){
            return dotChart.Y(d[keys[1]]/sum);
        })
        .attr("fill", "lightblue")
        .attr("stroke", "#1A237E");

      dotChart.LABELS.append("text")
        .attr("transform", "translate(0, "+ dotChart.HEIGHT +")")
        .attr("x", (dotChart.WIDTH - dotChart.MARGIN.right))
        .attr("dx", "-1.0em")
        .attr("dy", "3.0em")
        .text("["+ keys[0] +"]");

      dotChart.LABELS.append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", -40)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text(keys[1]);

      dotChart.TITLE.append("text")
        .attr("x", dotChart.WIDTH/2)
        .attr("y", -30)
        .attr("text-anchor", "middle")
        .attr("font-size", "22px")
        .text("Memoria Libre (RAM)");
    });     
    }
}

dotChart.MARGIN = {
    top: 70,
  right: 30,
  bottom: 50,
  left: 50
}

dotChart.WIDTH = 500 - dotChart.MARGIN.left - dotChart.MARGIN.right,
dotChart.HEIGHT = 300 - dotChart.MARGIN.top - dotChart.MARGIN.bottom;

dotChart.X = d3.scaleLinear().range([dotChart.HEIGHT, 0]);
dotChart.Y = d3.scaleBand().rangeRound([0, dotChart.WIDTH]);

dotChart.FORMAT_PERCENT = d3.format(".0%");

dotChart.X_AXIS = d3.axisBottom()
    .scale(dotChart.X);

dotChart.Y_AXIS = d3.axisLeft()
      .scale(dotChart.Y)
      .ticks(5)
      .tickFormat(dotChart.FORMAT_PERCENT);

dotChart.SVG = d3.select("body").append("svg")
    .attr("width", dotChart.WIDTH + dotChart.MARGIN.left + dotChart.MARGIN.right)
    .attr("height", dotChart.HEIGHT + dotChart.MARGIN.top + dotChart.MARGIN.bottom)
    .style("font", "10px verdana")
    .append("g")
    .attr("transform", "translate("+ dotChart.MARGIN.left +", "+ dotChart.MARGIN.top +")");

dotChart.LABELS = dotChart.SVG.append("g")
  .attr("class", "labels");

dotChart.TITLE = dotChart.SVG.append("g")
    .attr("class", "title");

HTML5 Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/d3.js"></script>
    <script src="dotChart.js"></script>
    <style>    
        .axis path,
        .axis line {
          fill: none;
          stroke: lightgrey;
        }
    </style>
</head>
<body>
    <script type="text/javascript">

        var line = new dotChart();
        line.drawChart("data_01.json");


    </script>

</body>
</html>

Data

[
    {"Country":14,"Income":457.81},
    {"Country":15,"Income":4924.5},
    {"Country":16,"Income":4792.6},
    {"Country":17,"Income": 460.1},
    {"Country":18,"Income":4821.7},
    {"Country":19,"Income":7601.1},
    {"Country":20,"Income":  5267},
    {"Country":21,"Income":5006.1},
    {"Country":22,"Income":4709.2},
    {"Country":23,"Income":7719.2},
    {"Country":24,"Income":7754.7},
    {"Country":25,"Income":4873.6},
    {"Country":26,"Income":4873.6},
    {"Country":27,"Income":7754.7},
    {"Country":28,"Income":5006.1},
    {"Country":29,"Income":5267},
    {"Country":30,"Income":4792.6}
]

javascript html5 d3.js

asked by Cristhian Plaza 29.06.2017 в 01:52

source

1 answer

Hide navbar from Adminlte with Meteor Call the value of a variable from one file to another

score 0 · Answer 1

The answer was simple ..., the script doChart.js must be inside the structure so that the document can recognize it and had a second error that I later corrected, the domains were inverted.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/d3.js"></script>

    <style>    
        .axis path,
        .axis line {
          fill: none;
          stroke: lightgrey;
        }
    </style>
</head>
<body>
    <script src="dotChart.js"></script>
    <script type="text/javascript">

        var line = new dotChart();
        line.drawChart("data_01.json");


    </script>

</body>
</html>

I corrected the domains later.

dotChart.Y = d3.scaleLinear().range([dotChart.HEIGHT, 0]);
dotChart.X = d3.scaleBand().rangeRound([0, dotChart.WIDTH]);