Question

我试图将rect附加到svg。我可以在chrome的开发工具中看到它们。但是，它们永远不会呈现，因为看起来我传递宽度值有问题。

此外，在D3的版本3 中，我在浏览器中收到以下错误消息：

d3.v3.min.js：1错误：属性宽度：预期长度，＆＃34; NaN＆＃34;。

版本4 中没有错误消息。

这是我的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <script src="https://d3js.org/d3.v3.min.js"></script>
  </head>
  <body>
      <script type="text/javascript">
        var data = [20,3,60,800];

        var width = 500,
            height = 500;

        var widthScale = d3.scale.linear()
                      .domain([0, 80])
                      .range(0, width);

        var svg = d3.select("body")
                  .append("svg")
                  .attr("width", width)
                  .attr("height", height);

        var bars = svg.selectAll("rect")
                    .data(data)
                    .enter()
                      .append("rect")
                      .attr("width", function (d) { return widthScale(d); } )
                      .attr("height", 50)
                      .attr("fill", "steelblue")
                      .attr("y", function (d, i) { return i * 100});
      </script>
  </body>
</html>

v3和v4之间的唯一区别是这一行（ scaleLinear ）：

var widthScale = d3.scaleLinear().domain([0, 80]).range(0, width);

任何帮助都非常感谢。

Answer 1

range必须是一个数组。文档很清楚：

linear.range（[值]）：

如果指定了值，则将比例的输出范围设置为指定的数组值

所以，而不是：

.range(0, width);

应该是：

.range([0, width]);

如果你使用.range(0, width) D3 v3.x返回一个NaN，你会在控制台中看到：

错误：属性宽度：预期长度，＆＃34; NaN＆＃34;。

但是，D3 v4.x返回undefined，您在控制台中看不到任何错误消息。

这是您的工作代码：

＆＃13;

        var data = [20,3,60,800];

        var width = 500,
            height = 500;

        var widthScale = d3.scale.linear()
                      .domain([0, 80])
                      .range([0, width]);

        var svg = d3.select("body")
                  .append("svg")
                  .attr("width", width)
                  .attr("height", height);

        var bars = svg.selectAll("rect")
                    .data(data)
                    .enter()
                      .append("rect")
                      .attr("width", function (d) { return widthScale(d); } )
                      .attr("height", 50)
                      .attr("fill", "steelblue")
                      .attr("y", function (d, i) { return i * 100});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

D3.js：元素没有任何宽度

1 个答案: