Question

错误：改变对象的[[Prototype]]会导致代码运行得非常慢;而是使用Object.create d3.v3.min.js创建具有正确的初始[[Prototype]]值的对象：3 意外值转换（NaN，NaN）解析转换属性。 d3.v3.min.js：1 TypeError：e为null

源代码：

<!DOCTYPE html>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<html>
    <head>
    <title>D3 tutorial</title>
        <script src="http://d3js.org/d3.v3.min.js"></script>
    </head>
    <body>
    <script>

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var width = 800,
height = 250,
radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

d3.json("mydata1.json",function (data) {


var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(radius - 70);

var pie = d3.layout.pie()
.sort(null)
.value(function (d) {
return d.totalCrimes;
});

var g = svg.selectAll(".arc")
    .data(data)
    .enter().append("g")
    .attr("class", "arc");

g.append("path")
    .attr("d", arc)
    .style("fill", function (d) {
    return color(d.crimeType);
        });

g.append("text")
    .attr("transform", function (d) {
    return "translate(" + arc.centroid(d) + ")";
    })
    .attr("dy", ".35em")
    .style("text-anchor", "middle")
    .text(function (d) {
    return d.crimeType;
    });
});
</script>
</body>
</html>

json数据：

[
{"crimeType":"mip","totalCrimes":24},
{"crimeType":"theft","totalCrimes":558},
{"crimeType":"drugs","totalCrimes":81},{"crimeType":"arson","totalCrimes":3}
,{"crimeType":"assault","totalCrimes":80},
{"crimeType":"burglary","totalCrimes":49},
{"crimeType":"disorderlyConduct","totalCrimes":63},
{"crimeType":"mischief","totalCrimes":189},
{"crimeType":"dui","totalCrimes":107},
{"crimeType":"resistingArrest","totalCrimes":11},
{"crimeType":"sexCrimes","totalCrimes":24},
{"crimeType":"other","totalCrimes":58}
];

Answer 1

几个问题：

1。）在创建之前使用高度/宽度变量。

2。）您缺少对数据绑定的派对函数调用：

var g = svg.selectAll(".arc")
  .data(pie(data)) //<-- need to call pie here.
  .enter().append("g")
  .attr("class", "arc");

3。）在回调中引用crimeType时，由于我们调用了pie()，因此应该是d.data.crimeType。

Putting this all together并且有效。

使用json数据绘制饼图时d3.js出错

1 个答案: