我有一个代码,其中会弹出“单击时”新窗口,并且我想从父窗口访问子窗口的数据。基本上,我正在做的是在父窗口中有数据集,并且当用户单击svg(圆圈)时,应检查数据集是否单击了哪个数据集,并将相应的信息发送到子窗口以显示饼图。
这是我的代码,子窗口上的数据集未更新
var newWindow = window.open('pie.html', '', 'width=500px,height=500px');
var div = d3.select(newWindow.document.body)
.append("div")
.attr("class", "toolTip");
var data = [{
name: 'Firearms',
total: 8124,
percent: 67.9
},
{
name: 'Knives or cutting instruments',
total: 1567,
percent: 13.1
},
{
name: 'Other weapons',
total: 1610,
percent: 13.5
},
{
name: 'Hands, fists, feet, etc.',
total: 660,
percent: 5.5
}
];
var width = 560,
height = 500,
radius = Math.min(width, height) / 2;
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"]);
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(radius - 70);
var pie = d3.layout.pie()
.sort(null)
.startAngle(1.1 * Math.PI)
.endAngle(3.1 * Math.PI)
.value(function(d) {
return d.total;
});
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.style("fill", function(d) {
return color(d.data.name);
})
.transition().delay(function(d, i) {
return i * 500;
}).duration(500)
.attrTween('d', function(d) {
var i = d3.interpolate(d.startAngle + 0.1, d.endAngle);
return function(t) {
d.endAngle = i(t);
return arc(d)
}
});
g.append("text")
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("dy", ".35em")
.transition()
.delay(1000)
.text(function(d) {
return d.data.name;
});
d3.selectAll("path").on("mousemove", function(d) {
div.style("left", d3.event.pageX + 10 + "px");
div.style("top", d3.event.pageY - 25 + "px");
div.style("display", "inline-block");
div.html((d.data.name) + "<br>" + (d.data.total) + "<br>" + (d.data.percent) + "%");
});
d3.selectAll("path").on("mouseout", function(d) {
div.style("display", "none");
});
//d3.select("body").transition().style("background-color", "#d3d3d3");
function type(d) {
d.total = +d.total;
return d;
}