0

He estado trabajando con D3.js y estoy aprendiendo sobre ello.., hice algunas gráficas simples desde un mismo documento HTML5 con éxito, el problema viene cuando quiero llevar todo el código jasvacript a un archivo javascript e intento instanciar el objeto creado, no presenta ningún error, sin embargo no grafica.

Código Javascript.

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");

Código HTML5

<!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>

Datos

[
    {"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}
]
2
  • Revisa 3 temas primero: 1) La función dotChart no tiene argumentos de entrada. 2) Estas definiendo las propiedades de dotChart fuera de la función 3) Asegurate de usar un servidor local como http-server cuando cargas datos de un archivo. Commented el 29 jun. 2017 a las 15:40
  • Ya graficó.., normalmente la verdad es que, si estaba llamando la función solo que el script doChart.js debía estar en el body, y tenía los dominios invertidos, era todo. Commented el 30 jun. 2017 a las 11:53

1 respuesta 1

0

La respuesta era sencilla..., el script doChart.js debe estar dentro de la estructura del para que el documento lo pueda reconocer y tenía un segundo error que posteriormente corregí, los dominios se encontraban invertidos.

<!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>

Corregí los dominios posteriormente.

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.