从子窗口访问父窗口数据

时间:2019-04-27 18:52:14

标签: javascript html d3.js

我有一个代码,其中会弹出“单击时”新窗口,并且我想从父窗口访问子窗口的数据。基本上,我正在做的是在父窗口中有数据集,并且当用户单击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;
}

0 个答案:

没有答案