Javascript 错误：<；rect>；属性宽度：预期长度；“南”；。及<；文本>；属性dx：预期长度；“南”；_Javascript_D3.js

Javascript 错误：<；rect>；属性宽度：预期长度；“南”；。及<；文本>；属性dx：预期长度；“南”；

javascript d3.js

Javascript 错误：<；rect>；属性宽度：预期长度；“南”；。及<；文本>；属性dx：预期长度；“南”；,javascript,d3.js,Javascript,D3.js,我想在D3中实现一个条形图，但是我在dx轴上的值是Date类型的，数据类型是D3库应该接受的，但是它似乎给了我这样一个错误：属性宽度：预期长度，“NaN”。这是我的代码： <html> <head> <meta charset="utf-8"> <title>a bar graph</title> </head> <style> .axis path,

我想在D3中实现一个条形图，但是我在dx轴上的值是Date类型的，数据类型是D3库应该接受的，但是它似乎给了我这样一个错误：属性宽度：预期长度，“NaN”。这是我的代码：

<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>

因此，当我想调用代码时，我认为应该在粘贴的代码中这样使用：

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（）。而且你用NaN
也不会有任何进展
您应该使用以下命令，而不是返回数组的xScale.range（）
：
xScale.bandwidth();

它不仅返回一个正确的数字，而且也是您要查找的
以下是更改后的代码：


.轴线路径，
.轴线{
填充：无；
笔画：黑色；
形状渲染：边缘清晰；
}
.轴文本{
字体系列：无衬线；
字体大小：11px；
}
MyRect先生{
填充：钢蓝；
}
.MyText{
填充物：白色；
文本锚定：中间；
}
var宽度=400；
var高度=400；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
变量填充={
左:30,，
右:30,，
前20名，
底数：20
};
var数据集=[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（数据集）]）
.范围（[height-padding.top-padding.bottom，0]）；
var xAxis=d3.axisBottom（）
.scale（xScale）
var yAxis=d3.axisLeft（）
.刻度（yScale）
var=4；
var rects=svg.selectAll（“.Myrect”）
.数据（数据集）
.输入（）
.append（“rect”）
.attr（“类”、“Myrect”）
.attr（“转换”、“转换”（+padding.left+）、“+padding.top+”）
.attr（“x”，函数（d，i）{
返回xScale（i）+1/2；
})
.attr（“y”，函数（d）{
返回yScale（d）；
})
.attr（“宽度”，xScale.bandwidth（）-rectpatting）
.attr（“高度”，功能（d）{
返回高度-padding.top-padding.bottom-yScale（d）；
});
var text=svg.selectAll（“.MyText”）
.数据（数据集）
.输入（）
.append（“文本”）
.attr（“类”、“我的文本”）
.attr（“转换”、“转换”（+padding.left+）、“+padding.top+”）
.attr（“x”，函数（d，i）{
返回xScale（i）+1/2；
})
.attr（“y”，函数（d）{
返回yScale（d）；
})
.attr（“dx”，函数（）{
返回（xScale.bandwidth（）-rectPadding）/2；
})
.attr（“dy”，函数（d）{
返回20；
})
.文本（功能（d）{
返回d；
});
svg.append（“g”）
.attr（“类”、“轴”）
.attr（“变换”、“平移”（“+padding.left+”，“+（height-padding.bottom）+”））
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“轴”）
.attr（“转换”、“转换”（+padding.left+）、“+padding.top+”）
.呼叫（yAxis）；

xScale.bandwidth();