D3.js和Javascript_Javascript_Html_D3.js

D3.js和Javascript

javascript html d3.js

D3.js和Javascript,javascript,html,d3.js,Javascript,Html,D3.js,我是新来的，我有个问题。事实上，我一直在使用D3.js。我试着处理一些图形，当我在同一个html文档上处理所有图形时，我可以很好地处理它们。但是当我在js文档中使用D3.js代码并从html文档调用它时，它不会绘制任何图形。它没有显示任何错误，但不知道发生了什么以及为什么它没有显示任何错误 function dotChart() { this.drawChart = function(uri_data) { d3.json(uri_data, function(

我是新来的，我有个问题。事实上，我一直在使用D3.js。我试着处理一些图形，当我在同一个html文档上处理所有图形时，我可以很好地处理它们。但是当我在js文档中使用D3.js代码并从html文档调用它时，它不会绘制任何图形。它没有显示任何错误，但不知道发生了什么以及为什么它没有显示任何错误

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

我的html代码是

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

我解决了这个问题，在身体的结构中添加de doChart.js…，我犯的另一个错误是x和y域，因为它们是倒置的

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

它是图形，但是…，不正确。这是我的新进展。

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

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