Fatal编程技术网
  • javascript/
  • Javascript 得到；无法读取属性'；getAttribute'；“无效”的定义；错误

Javascript 得到；无法读取属性'；getAttribute'；“无效”的定义；错误

javascript csv d3.js charts

Javascript 得到；无法读取属性'；getAttribute'；“无效”的定义；错误,javascript,csv,d3.js,charts,scatter-plot,Javascript,Csv,D3.js,Charts,Scatter Plot,我试图从csv文件中绘制一个D3散点图。csv看起来像这样： location smokeSomeDays allFamPovPct AL 5% 15% AK 5% 8% AZ 4% 13% AR 6% 14% CA 4%

我试图从csv文件中绘制一个D3散点图。csv看起来像这样：

location    smokeSomeDays   allFamPovPct
AL                5%             15%
AK                5%             8%
AZ                4%             13%
AR                6%             14%
CA                4%             12%
CO                4%             8%
CT                4%             8%
DE                4%             9%
DC                5%             14%
...
...
...

Uncaught TypeError: Cannot read property 'getAttribute' of null  d3.min.js:4
at dt.ul [as attr] (d3.min.js:4)
at app.js:49
at Array.forEach (<anonymous>)
at app.js:17
at d3.min.js:3
at Object.<anonymous> (d3.min.js:7)
at v.call (d3.min.js:4)
at XMLHttpRequest.e (d3.min.js:7)

|
|
|
|
|
|
|
|
|
O ---------------------------------------
我希望Y轴是“smokeSomeDays”，X轴是“allFamPovPct”

下面是我的js，它引发了“无法读取null属性'getAttribute'的错误”，尽管代码中没有提到'getAttribute'

var svgW = 960;
var svgH = 500;

var margin = { top: 20, right: 40, bottom: 60, left: 50 };

var chartWidth = svgW - margin.left - margin.right;
var chartHeight = svgH - margin.top - margin.bottom;

var svg = d3.select("body")
  .append("svg")
  .attr("width", svgW)
  .attr("height", svgH)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv('data.csv', function(data) {
  data.forEach(function () {
  // Scales
    var xScale = d3.scaleLinear()
    .domain([
      d3.min([0,d3.min(data,function (d) { return d.allFamPovPct })]),
      d3.max([0,d3.max(data,function (d) { return d.allFamPovPct })])
      ])
    .range([0,chartWidth])
  var yScale = d3.scaleLinear()
    .domain([
      d3.min([0,d3.min(data,function (d) { return d.smokeSomeDays })]),
      d3.max([0,d3.max(data,function (d) { return d.smokeSomeDays })])
      ])
    .range([chartHeight,0])
  // X-axis
  var xAxis = d3.axisBottom()
    .scale(xScale)
    .ticks(5)
  // Y-axis
  var yAxis = d3.axisLeft()
    .scale(yScale)
    .ticks(5)
  // Circles
  var circles = svg.selectAll('circle')
      .data(data)
      .enter()
     .append('circle')
      .attr('cx',function (d) { return xScale(d.allFamPovPct) })
      .attr('cy',function (d) { return yScale(d.smokeSomeDays) })
      .attr('r','10')
      .attr('stroke','black')
      .attr('stroke-width',1)
      .attr('fill')

  svg.append('g')
      .attr('class','axis')
      .attr('transform', 'translate(0,' + chartHeight + ')')
      .call(xAxis)
    .append('text') // X-axis Label
      .attr('class','label')
      .attr('y',-10)
      .attr('x',chartWidth)

  svg.append('g')
      .attr('class', 'axis')
      .call(yAxis)
     .append('text') // y-axis Label
      .attr('class','label')
      .attr('transform','rotate(-90)')
      .attr('x',0)
      .attr('y',5)

});
});
完整错误消息如下所示：

location    smokeSomeDays   allFamPovPct
AL                5%             15%
AK                5%             8%
AZ                4%             13%
AR                6%             14%
CA                4%             12%
CO                4%             8%
CT                4%             8%
DE                4%             9%
DC                5%             14%
...
...
...

Uncaught TypeError: Cannot read property 'getAttribute' of null  d3.min.js:4
at dt.ul [as attr] (d3.min.js:4)
at app.js:49
at Array.forEach (<anonymous>)
at app.js:17
at d3.min.js:3
at Object.<anonymous> (d3.min.js:7)
at v.call (d3.min.js:4)
at XMLHttpRequest.e (d3.min.js:7)

|
|
|
|
|
|
|
|
|
O ---------------------------------------
这是我的html，如果有帮助的话：

    <!DOCTYPE html>
    <html>
      <head>
        <title>Data Journalism</title>
<style>
.chart {

}

.main text {
    font: 10px sans-serif;  
}

.axis circle, .axis path {
    shape-rendering: crispEdges;
    stroke: black;
    fill: none;
}

circle {
    fill: steelblue;
}

</style>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.3/d3.min.js">
</script>
      </head>
      <body>
        <div class='content'></div>
        <script type="text/javascript" src="app.js"></script>
      </body>
    </html>


数据新闻
.图表{
}
.正文{
字体：10px无衬线；
}
.轴圆，.轴路径{
形状渲染：边缘清晰；
笔画：黑色；
填充：无；
}
圈{
填充：钢蓝；
}
提前谢谢你的帮助

您现在遇到的错误是由于

.attr("fill")
。。。他是一个获得者，而不是一个二传者。请记住，此错误是由D3库引发的，但您的控制台显示了实际的罪魁祸首代码行

然而，这是你在这里遇到的最小问题

第一个大问题是回调内部的
forEach
。这在D3代码中是完全不必要的。摆脱它

第二个问题是
smokeSomeDays
和
allFamPovPct
是字符串，而不是数字。你必须将它们转换成数字才能使用你的刻度。在此示例中，我使用了一个行函数：

function(d){
    d.smokeSomeDays = +d.smokeSomeDays.split("%")[0];
    d.allFamPovPct = +d.allFamPovPct.split("%")[0];
    return d;
}
以下是您的代码和这些更改（以及CSV的几行）：

var csv=`location，smokeSomeDays，allFamPovPct
铝，5%，15%
AK，5%，8%
AZ，4%，13%
AR分别为6%、14%；
var svgW=400；
var-svgH=300；
var保证金={
前20名，
右:40,，
底数：60，
左：50
};
var chartWidth=svgW-margin.left-margin.right；
var chartHeight=svgH-margin.top-margin.bottom；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，svgW）
.attr（“高度”，svgH）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
变量数据=d3.csvParse（csv，函数（d）{
d、 smokeSomeDays=+d.smokeSomeDays.split（“%”[0]；
d、 allFamPovPct=+d.allFamPovPct.split（“%”[0]；
返回d；
})
var xScale=d3.scaleLinear（）
.域名([
d3.min（[0，d3.min（数据，函数（d））{
返回d.ALLPOPVPCT
})]),
d3.max（[0，d3.max（数据，函数（d））{
返回d.ALLPOPVPCT
})])
])
.范围（[0，图表宽度]）
var yScale=d3.scaleLinear（）
.域名([
d3.min（[0，d3.min（数据，函数（d））{
有几天再回来
})]),
d3.max（[0，d3.max（数据，函数（d））{
有几天再回来
})])
])
.范围（[chartHeight，0]）
//X轴
var xAxis=d3.axisBottom（）
.scale（xScale）
.滴答声（5）
//Y轴
var yAxis=d3.axisLeft（）
.刻度（yScale）
.滴答声（5）
//圈
var circles=svg.selectAll（'circle'）
.数据（数据）
.输入（）
.append（'圆'）
.attr（'cx'，函数（d）{
返回xScale（d.allFamPovPct）
})
.attr（'cy'，函数（d）{
返回yScale（d.smokeSomeDays）
})
.attr（'r'，'10'）
.attr（'笔划'，'黑色'）
.attr（'笔划宽度'，1）
.attr（“填充”、“teal”）；
append（'g'）
.attr（'类'，'轴'）
.attr（'transform'，'translate（0'，+chartHeight+'））
.呼叫（xAxis）
.append（'text'）//X轴标签
.attr（'类'，'标签'）
.attr（'y'，-10）
.attr（'x'，图表宽度）
append（'g'）
.attr（'类'，'轴'）
.呼叫（yAxis）
.append（'text'）//y轴标签
.attr（'类'，'标签'）
.attr（'transform'、'rotate（-90'））
.attr（'x'，0）
.attr（'y'，5）
您现在遇到的错误是由于

.attr("fill")
。。。他是一个获得者，而不是一个二传者。请记住，此错误是由D3库引发的，但您的控制台显示了实际的罪魁祸首代码行

然而，这是你在这里遇到的最小问题

第一个大问题是回调内部的
forEach
。这在D3代码中是完全不必要的。摆脱它

第二个问题是
smokeSomeDays
和
allFamPovPct
是字符串，而不是数字。你必须将它们转换成数字才能使用你的刻度。在此示例中，我使用了一个行函数：

function(d){
    d.smokeSomeDays = +d.smokeSomeDays.split("%")[0];
    d.allFamPovPct = +d.allFamPovPct.split("%")[0];
    return d;
}
以下是您的代码和这些更改（以及CSV的几行）：

var csv=`location，smokeSomeDays，allFamPovPct
铝，5%，15%
AK，5%，8%
AZ，4%，13%
AR分别为6%、14%；
var svgW=400；
var-svgH=300；
var保证金={
前20名，
右:40,，
底数：60，
左：50
};
var chartWidth=svgW-margin.left-margin.right；
var chartHeight=svgH-margin.top-margin.bottom；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，svgW）
.attr（“高度”，svgH）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
变量数据=d3.csvParse（csv，函数（d）{
d、 smokeSomeDays=+d.smokeSomeDays.split（“%”[0]；
d、 allFamPovPct=+d.allFamPovPct.split（“%”[0]；
返回d；
})
var xScale=d3.scaleLinear（）
.域名([
d3.min（[0，d3.min（数据，函数（d））{
返回d.ALLPOPVPCT
})]),
d3.max（[0，d3.max（数据，函数（d））{
返回d.ALLPOPVPCT
})])
])
.范围（[0，图表宽度]）
var yScale=d3.scaleLinear（）
.域名([
d3.min（[0，d3.min（数据，函数（d））{
有几天再回来
})]),
d3.max（[0，d3.max（数据，函数（d））{
有几天再回来
})])
])
.范围（[chartHeight，0]）
//X轴
var xAxis=d3.axisBottom（）
.scale（xScale）
.滴答声（5）
//Y轴
var yAxis=d3.axisLeft（）
.刻度（yScale）
.滴答声（5）
//圈
var circles=svg.selectAll（'circle'）
.数据（数据）
.输入（）
.append（'圆'）
.attr（'cx'，函数（d）{
返回xScale（d.allFamPovPct）
})
.attr（'cy'，函数（d）{
返回yScale（d.smokeSomeDays）
})
.attr（'r'，'10'）
.attr（'笔划'，'黑色'）
.attr（'笔划宽度'，1）
.attr（“填充”、“teal”）；
append（'g'）
.attr（'class'，'