Question

我正在尝试可视化少量测试数据，可以看到x轴和y轴，但是我不相信.enter().append()函数可以正常工作。

我试图重新分配图形的不同部分，即重构的代码块。重做html结构，我没有主意。


    var margin = {top: 20, right: 20, bottom: 70, left: 40},
    width = 600 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;


    var x = d3.scaleBand().range([0, width]);
    var y = d3.scaleLinear().range([height, 0]);


    var xAxis = d3.axisBottom()
        .scale(x)
        .ticks(d3.timeFormat("%Y-%B"));

    var yAxis = d3.axisLeft()
        .scale(y)
        .ticks(2);

    var chart = d3.select(".chart")
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


    if ("{{ chart_end }}" === "None") {
        url = "/api/chart/"+"{{ user }}/" + "{{ chart_start }}/";
    }
    else {
        url = "/api/chart/"+"{{ user }}/" + "{{ chart_start }}/" +"{{ chart_end }}/";
    }

    d3.json(url).then(function(data, err) {

      if (err) { console.log(err);}
      console.log(data);
      var parseDate = d3.timeParse("%Y-%m-%d");
      var months = ["January", "February", "March", "April", "May","June","July",
          "August", "September", "October", "November","December"];

      data.date.forEach(function(d) {
          d.date = parseDate(d.date);
          d.date = months[d.date.getMonth()] + " " + d.date.getFullYear();
          d.value = d.val;
      });

      x.domain(data.date.map(function(d) { return d.date; }));


      function local_max(data) {
          var max_val = 0;
          data.date.forEach(function(d) {
              max_val = Math.max(max_val, d.val);
          });
          return max_val;
      }

      y.domain([0, local_max(data)]);

      chart.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis)
          .selectAll("text")
          .style("text-anchor", "end")
          .attr("dx", "3.5em")
          .attr("dy", "1em");

      chart.append("g")
          .attr("class", "y axis")
          .call(yAxis);


      chart.selectAll(".bar")
          .data(data)
          .enter().append("rect")
              .style("fill", "green")
              .attr("x", function(d) { return x(d.date); })
              .attr("width", x.bandwidth())
              .attr("y", function(d) { return y(d.value); })
              .attr("height", function(d) { return height - y(d.value); });

      function type(d) {
          d.value = +d.value;
          return d;
      }

    });

Expected view

Actual view

Answer 1

我以前无法查看，因为我没有正确访问提供的json中的数据。更改

chart.selectAll(".bar")
          .data(data)

到

chart.selectAll(".bar")
          .data(data.date)

已修复查看中的问题。

无法查看图形中的条形图

1 个答案: