Question

我正在尝试使用Vue.js在d3中显示一个简单的条形图。样本json数据很简单：

[
  {
    "name": "Locke",
    "value": 4
  },
  {
    "name": "Reyes",
    "value": 8
  },
  {
    "name": "Ford",
    "value": 15
  },
  {
    "name": "Jarrah",
    "value": 16
  },
  {
    "name": "Shephard",
    "value": 23
  },
  {
    "name": "Kwon",
    "value": 42
  }
]

但是由于某些原因，该图表从未显示。

<template>
<body></body>
</template>

<script>
import * as d3 from "d3";
export default {
  name: "dChart",
  data() {
    return {
      width: 960,
      height: 500,
      jsonUrl: "http://data"
    };
  },
  mounted() {
    /* eslint-disable */
    this.getData();
  },
  methods: {
    getData: function() {
      var margin = { top: 20, right: 20, bottom: 30, left: 40 },
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

      // set the ranges
      var x = d3
        .scaleBand()
        .range([0, width])
        .padding(0.1);
      var y = d3.scaleLinear().range([height, 0]);

      // append the svg object to the body of the page
      // append a 'group' element to 'svg'
      // moves the 'group' element to the top left margin
      var svg = d3
        .select("body")
        .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 + ")");

      // get the data
      d3.json(this.jsonUrl, function(error, data) {
        if (error) throw error;

        // format the data
        data.forEach(function(d) {
          d.value = +d.value;
        });

        // Scale the range of the data in the domains
        x.domain(
          data.map(function(d) {
            return d.name;
          })
        );
        y.domain([
          0,
          d3.max(data, function(d) {
            return d.value;
          })
        ]);

        // append the rectangles for the bar chart
        svg
          .selectAll(".bar")
          .data(data)
          .enter()
          .append("rect")
          .attr("class", "bar")
          .attr("x", function(d) {
            return x(d.name);
          })
          .attr("width", x.bandwidth())
          .attr("y", function(d) {
            return y(d.value);
          })
          .attr("height", function(d) {
            return height - y(d.value);
          });

        // add the x Axis
        svg
          .append("g")
          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(x));

        // add the y Axis
        svg.append("g").call(d3.axisLeft(y));
      });
    }
  }
};
</script>

<style lang="scss">
.bar { fill: steelblue; }
</style>

Chrome控制台不显示任何错误。当我在控制台中搜索从请求中接收到的数据时，数据确实存在。我尝试遵循多种指南，但始终收到相同的错误。 D3是种讨厌的东西。还有其他人遇到过同样的问题吗？

巨大的更新在这里：

我以不同的方式去做。我使用axios进行了一个promise调用来获取数据，然后使用它来创建图形。这有效..代码发布在下面...

<script>
import * as d3 from "d3";
export default {
  name: "dChart",
  data() {
    return {
      width: 960,
      height: 500,
      jsonUrl: "http://wallboard.onvidacx.local/data",
      jsonData : [],

    };
  },
  mounted() {
    /* eslint-disable */
    this.testJson();
  },
  methods: {

    testJson: function() {
      this.$http.get(this.jsonUrl).then(result => {
        this.jsonData = result.data;
        this.getData();
      });
    },
    getData: function() {
      console.log(this.jsonData);
      var margin = { top: 20, right: 20, bottom: 30, left: 40 },
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

      // set the ranges
      var x = d3
        .scaleBand()
        .range([0, width])
        .padding(0.1);
      var y = d3.scaleLinear().range([height, 0]);

      // append the svg object to the body of the page
      // append a 'group' element to 'svg'
      // moves the 'group' element to the top left margin
      var svg = d3
        .select("body")
        .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 + ")");

      // get the data

        // format the data
        this.jsonData.forEach(function(d) {
          d.value = +d.value;
        });

        // Scale the range of the data in the domains
        x.domain(
          this.jsonData.map(function(d) {
            return d.name;
          })
        );
        y.domain([
          0,
          d3.max(this.jsonData, function(d) {
            return d.value;
          })
        ]);

        // append the rectangles for the bar chart
        svg
          .selectAll(".bar")
          .data(this.jsonData)
          .enter()
          .append("rect")
          .attr("class", "bar")
          .attr("x", function(d) {
            return x(d.name);
          })
          .attr("width", x.bandwidth())
          .attr("y", function(d) {
            return y(d.value);
          })
          .attr("height", function(d) {
            return height - y(d.value);
          });

        // add the x Axis
        svg
          .append("g")
          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(x));

        // add the y Axis
        svg.append("g").call(d3.axisLeft(y));
      }
    }
};
</script>

如何在D3中使用远程JSON数据显示条形图

0 个答案: