如何从垂直条形图更改为水平形图。 3天

Question

从垂直条形图切换到水平条形图时遇到问题。

这是获取垂直或柱状图的功能。这有效：

getColumnChart: 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(".columnchart")
        .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("y", function(d) {
          return y(d.value);
        })
        .attr("width", x.bandwidth())
        .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));
    },

结果：

columnchart

这是获取水平条形图的功能。这不起作用：

getRowChart: 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 y = d3
        .scaleBand()
        .range([0, height])
        .padding(0.1);
      var x = d3.scaleLinear().range([0, width]);

      // 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(".rowchart")
        .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(
        0,
        d3.max(this.jsonData, function(d) {
          return d.value;
        })
      );
      y.domain([
        this.jsonData.map(function(d) {
          return d.name;
        })
      ]);

      // 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.value);
        })
        .attr("y", function(d) {
          return y(d.name);
        })
        .attr("height", y.bandwidth())
        .attr("width", function(d) {
          return width - x(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));
    }

结果： barchart

我认为两者都很相似。但是我遇到的问题在这里：

.attr("width", function(d) {
  return width - x(d.value);
});

在这里：

.attr("x", function(d) {
  return x(d.value);
})

问题发生在x（）处。 x域的功能在此处定义：

  x.domain(
    0,
    d3.max(this.jsonData, function(d) {
      return d.value;
    })
  );

控制台中返回的错误是：

Error: <rect> attribute width: Expected length, "NaN".

和

Error: <rect> attribute x: Expected length, "NaN".

jsonData看起来像这样：

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

编辑：

我不想说我很蠢，但是..

问题出在

  x.domain(
    0,
    d3.max(this.jsonData, function(d) {
      return d.value;
    })
  );

应该是

  x.domain([
    0,
    d3.max(this.jsonData, function(d) {
      return d.value;
    })
  ]);

这是语法错误。但是错误日志不足以说明问题。