Question

我刚刚开始使用D3和JS，我正在尝试将X轴添加到条形图中。它没有出现。我认为这是因为我的代码底部的SELECT不正确（没有变量g）。那应该是什么样的变数呢？

barchart.js

svg.append("g")

Answer 1

＆＃34; G＆＃34;不是变量，它是SVG中的组（<g>）元素。

这里的问题似乎是这一行：

.attr("transform", "translate(0," + height + ")")

如果height是SVG的高度，则不会显示任何内容，因为您正在将轴平移到SVG的末尾。

因此，解决方案是将其转换为低于该值的值：

.attr("transform", "translate(0," + (height - padding) + ")")

Answer 2

xAxis在y中被转换为高度，因此无法看到它在svg之外。

我修正了高度和宽度。给文本一种白色。

你想在x轴上做什么？

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>
<script src="//d3js.org/d3.v3.min.js"></script>

<body>

</body>
<script>
  var width = 600;
  var height = 600;
  // Create data array of values to visualize
  var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

  var xScale = d3.scale.linear().range([0, width]);
  // var yScale = d3.scale.linear().range([height, 0]);

  // Create variable for the SVG
  var svg = d3.select("body").append("svg")
    .attr("height", 600)
    .attr("width", 600);

  // Select, append to SVG, and add attributes to rectangles for bar chart
  svg.selectAll("rect")
    .data(dataArray)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("height", function(d, i) {
      return (d * 10)
    })
    .attr("width", "40")
    .attr("x", function(d, i) {
      return (i * 60) + 25
    })
    .attr("y", function(d, i) {
      return 400 - (d * 10)
    });

  // Select, append to SVG, and add attributes to text
  svg.selectAll("text")
    .data(dataArray)
    .enter().append("text")
    .text(function(d) {
      return d
    })
    .attr("class", "text")
    .attr("x", function(d, i) {
      return (i * 60) + 36
    })
    .attr("y", function(d, i) {
      return 415 - (d * 10)
    })
    .style("fill", "white");

  //add axis
  var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");

  // var yAxis = d3.svg.axis().scale(y)
  //     .orient("left").ticks(5);

  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0, 420)")
    .call(xAxis);
</script>

</html>

轴不会出现在条形图上

2 个答案: