属性 dx : Expected length, "NaN"-6ren"> 属性 dx : Expected length, "NaN"-我想在D3中实现一个条形图，但是我在dx轴上的值是Date类型，D3库应该接受的数据类型，但它似乎给我这样的错误:attribute width: Expected length ，“南”。这是我的代-6ren">
个人中心
gpt4 book ai didi

javascript - 错误 : attribute width: Expected length, "NaN"。和 属性 dx : Expected length, "NaN"

转载 作者：可可西里 更新时间：2023-11-01 02:24:49 38 4
gpt4 key购买 nike

我想在D3中实现一个条形图，但是我在dx轴上的值是Date类型，D3库应该接受的数据类型，但它似乎给我这样的错误:attribute width: Expected length ，“南”。这是我的代码:

<html> 
 <head> 
    <meta charset="utf-8">         
    <title>a bar graph</title> 
 </head> 
 <style>
    .axis path,
    .axis line{
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
    }

    .axis text {
        font-family: sans-serif;
        font-size: 11px;
    }

    .MyRect {
        fill: steelblue;
    }

    .MyText {
        fill: white;
        text-anchor: middle;
    }
 </style>
    <body>
        <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
        <script>
        var width=400;  
        var height=400; 

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

        var padding = {left:30, right:30, top:20, bottom:20};

        var dataset=[10,20,30,40,33,24,12,5]; 


        var xScale = d3.scaleBand()
                       .domain(d3.range(dataset.length))
                       .range([0, width-padding.left-padding.right]);


        var yScale = d3.scaleLinear()
                       .domain([0,d3.max(dataset)])
                       .range([height-padding.top-padding.bottom,0]);

        var xAxis = d3.axisBottom()
                      .scale(xScale)          

        var yAxis = d3.axisLeft()
                      .scale(yScale)

        var rectPadding=4;  

        var rects = svg.selectAll(".Myrect")
                       .data(dataset)
                       .enter()
                       .append("rect")
                       .attr("class","Myrect")
                       .attr("transform","translate(" + padding.left + "," + padding.top + ")")
                       .attr("x",function(d,i){
                            return xScale(i) + rectPadding/2;
                        })
                        .attr("y",function(d){
                            return yScale(d);
                        })
                       .attr("width",xScale.range()- rectPadding)
                       .attr("height",function(d){
                            return height - padding.top - padding.bottom - yScale(d);
                       });
        var texts = svg.selectAll(".MyText")
                       .data(dataset)
                       .enter()
                       .append("text")
                       .attr("class","MyText")
                       .attr("transform","translate(" + padding.left + "," + padding.top + ")")
                       .attr("x", function(d,i){
                                return xScale(i) + rectPadding/2;
                        })
                       .attr("y",function(d){
                                return yScale(d);
                        })
                       .attr("dx",function(){
                                return (xScale.range() - rectPadding)/2;
                        })
                       .attr("dy",function(d){
                                return 20;
                        })
                       .text(function(d){
                                return d;
                        });

        svg.append("g")
           .attr("class","axis")
           .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
           .call(xAxis); 

        svg.append("g")
           .attr("class","axis")
           .attr("transform","translate(" + padding.left + "," + padding.top + ")")
           .call(yAxis);
        </script>
    </body> 
</html>

还有另一个错误:属性 dx:预期长度，“NaN”。我觉得是band scales产生的，但是用了官方的介绍，还是不行。官方介绍:

var x = d3.scaleBand()
    .domain(["a", "b", "c"])
    .range([0, width]);

所以当我要调用代码的时候，我觉得在我粘贴的代码中应该这样使用:

var texts = svg.selectAll(".MyText")
                       .data(dataset)
                       .enter()
                       .append("text")
                       .attr("class","MyText")
                       .attr("transform","translate(" + padding.left + "," + padding.top + ")")
                       .attr("x", function(d,i){
                                return xScale(i) + rectPadding/2;
                        })
                       .attr("y",function(d){
                                return yScale(d);
                        })
                       .attr("dx",function(){
                                return (xScale.range() - rectPadding)/2;
                        })
                       .attr("dy",function(d){
                                return 20;
                        })
                       .text(function(d){
                                return d;
                        });

但它似乎给了我两个错误。我是初学者。非常感谢!

最佳答案

现在，对于矩形的宽度和文本的 dx，您正在使用:

xScale.range() - rectPadding

但是 xScale.range() 返回一个数组，而 array - number 会给你一个 NaN。而且你不会用 NaN...

代替将返回数组的 xScale.range()，您应该使用:

xScale.bandwidth();

这不仅会返回正确的数字，而且它也是您要查找的内容。

这里是你的代码更改:

<style>
  .axis path,
  .axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
  }
  
  .axis text {
    font-family: sans-serif;
    font-size: 11px;
  }
  
  .MyRect {
    fill: steelblue;
  }
  
  .MyText {
    fill: white;
    text-anchor: middle;
  }
</style>

<body>
  <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
  <script>
    var width = 400;
    var height = 400;

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

    var padding = {
      left: 30,
      right: 30,
      top: 20,
      bottom: 20
    };

    var dataset = [10, 20, 30, 40, 33, 24, 12, 5];


    var xScale = d3.scaleBand()
      .domain(d3.range(dataset.length))
      .range([0, width - padding.left - padding.right]);


    var yScale = d3.scaleLinear()
      .domain([0, d3.max(dataset)])
      .range([height - padding.top - padding.bottom, 0]);

    var xAxis = d3.axisBottom()
      .scale(xScale)

    var yAxis = d3.axisLeft()
      .scale(yScale)

    var rectPadding = 4;

    var rects = svg.selectAll(".Myrect")
      .data(dataset)
      .enter()
      .append("rect")
      .attr("class", "Myrect")
      .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
      .attr("x", function(d, i) {
        return xScale(i) + rectPadding / 2;
      })
      .attr("y", function(d) {
        return yScale(d);
      })
      .attr("width", xScale.bandwidth() - rectPadding)
      .attr("height", function(d) {
        return height - padding.top - padding.bottom - yScale(d);
      });
    var texts = svg.selectAll(".MyText")
      .data(dataset)
      .enter()
      .append("text")
      .attr("class", "MyText")
      .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
      .attr("x", function(d, i) {
        return xScale(i) + rectPadding / 2;
      })
      .attr("y", function(d) {
        return yScale(d);
      })
      .attr("dx", function() {
        return (xScale.bandwidth() - rectPadding) / 2;
      })
      .attr("dy", function(d) {
        return 20;
      })
      .text(function(d) {
        return d;
      });

    svg.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")
      .call(xAxis);

    svg.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
      .call(yAxis);
  </script>
</body>

PS:您不需要rectPadding。只需在波段比例中设置填充:

var xScale = d3.scaleBand()
    .domain(d3.range(dataset.length))
    .range([0, width-padding.left-padding.right])
    .padding(0.2);//some value here

关于javascript - 错误 : <rect> attribute width: Expected length, "NaN"。和 <text> 属性 dx : Expected length, "NaN"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40746319/

38 4 0
文章推荐： javascript - 如何使用 Babel 正确加载 .eot 和 .woff 文件？
文章推荐： java - Spring Batch - TaskletStep 中的可跳过异常
文章推荐： java - 通过 "mvn exec:exec"运行class文件
文章推荐： javascript - Visual Studio 单页应用程序集成
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com