Question

我一直试图用多个环来实现D3.js甜甜圈。但是，问题在于点击事件，因为它点击第一个环时工作正常但是，在点击第二个环时显示奇怪的行为。此外，它还显示了鼠标悬停的一些奇怪问题。

{＆＃34;元数据＆＃34;：空，＆＃34;数据＆＃34;：{graphDetails＆＃34;：[{＆＃34;显示名＆＃34;：＆＃34; MUW＆＃34;＆＃34;名称＆＃34;：＆＃34; DEF＆＃ 34;，＆＃34;得分＆＃34;：5}，{＆＃34;显示名＆＃34;：＆＃34; ABC＆＃34;＆＃34;名称＆＃34;：＆＃34; ABCD＆＃34 ;，＆＃34;得分＆＃34;：15}，{＆＃34;显示名＆＃34;：＆＃34; DEFA＆＃34;＆＃34;名称＆＃34;：＆＃34; DEF＆＃34; ＆＃34;得分＆＃34; 35}]，＆＃34; graphOneDetails＆＃34;：[{＆＃34;显示名＆＃34;：＆＃34; D1＆＃34;＆＃34;名称＆＃34 ;：＆＃34; D1＆＃34;＆＃34;得分＆＃34;：11}，{＆＃34;显示名＆＃34;：＆＃34; D2＆＃34;＆＃34;名称＆＃34; ：＆＃34; D2＆＃34;＆＃34;得分＆＃34; 25}，{＆＃34;显示名＆＃34;：＆＃34; D3＆＃34;＆＃34;名称＆＃34 ;: ＆＃34; D3＆＃34;＆＃34;得分＆＃34;：22}]}，＆＃34;成功＆＃34;：真}

  //Define arc ranges
    var arcText = d3.scale.ordinal().rangeRoundBands([0, width], .1, .3);
    // Determine size of arcs
    var arc = d3.svg.arc().innerRadius(radius - 75).outerRadius(radius - 25);
    var arc_2= d3.svg.arc().innerRadius(radius - 25).outerRadius(radius);
    //Create the donut pie chart layout
    d3.layout.pie().value(function(d){
    return d["score"];
    }).sort(null);
    //Append SVG attributes and append g to the SVG
    d3.select("#donut-chart")
    .attr("width", width)
    .attr("height",height)
    .append("g")
    .attr("transform","translate("+radius+","+radius+")");

    //Define Inner Circle
    svg.append("circle")
    .attr("cx",0)
    .attr("cy",0)
    .attr("r",280)
    .attr("fill","#fff");
    //Calculate SVG paths and fill in the colors
    var div = d3.select("body")
    .append("div")
    .attr("class","tooltip")
    .style("opactiy",0);
    // Append First Chart
    var g = svg.selectAll(".arc").data(pie($scope.categories))
    .enter()
    .append("g")
    .attr("class","arc")
    .on("click",function(d, i){
        alert(d.data.name)
    }).on("mouseover",function(d){
        alert(d.data.name);
    }).on("mouseout",function(d){
       alert(d.data.name);
    });
   g.append("path")
    .attr("d",arc)
    .attr("fill","#024");
   g.append("text")
    .attr("transform", function(d){
        return "translate("+arc.centroid(d)+")";
    }).attr("dy",".35em")
    .style("text-anchor","middle")
    .attr("fill","#fff")
    .text(function (d,i){
        return d.data.displayName
    });
   g.selectAll(".arc text").call(wrap.arcText.rangeBand());
   //Append Second Chart
   g.data(pie($scope.divisions)).append("path")
    .attr("d",arc_2)
    .attr("fill","#eee");
   g.on("click, function(d,i){
    alert(d.data.name);
   }).on("mouseover", function(d){
    alert(d.data.name);
   });
   //Append text to second chart
      g.append("text")
    .attr("transform", function(d){
        return "translate("+arc_2.centroid(d)+")";
    }).attr("dy",".35em")
    .style("text-anchor","middle")
    .attr("fill","#fff")
    .text(function (d,i){
        return d.data.displayName
    });
   g.selectAll(".arc text").call(wrap.arcText.rangeBand());

在初始状态下它工作正常，但是，当我单击一个图表时，它会正确显示数据。当我点击内部图表并将我的json更新为

时

{＆＃34;元数据＆＃34;：空，＆＃34;数据＆＃34;：{graphDetails＆＃34;：[{＆＃34;显示名＆＃34;：＆＃34; MUW＆＃34;＆＃34;名称＆＃34;：＆＃34; DEF＆＃ 34;，＆＃34;得分＆＃34;：5}，{＆＃34;显示名＆＃34;：＆＃34; DEFA＆＃34;＆＃34;名称＆＃34;：＆＃34; DEF＆＃34 ;，＆＃34;得分＆＃34; 35}]，＆＃34; graphOneDetails＆＃34;：[{＆＃34;显示名＆＃34;：＆＃34; D1＆＃34;＆＃34;名称＆＃ 34;：＆＃34; D1＆＃34;＆＃34;得分＆＃34;：11}，{＆＃34;显示名＆＃34;：＆＃34; D3＆＃34;＆＃34;名称＆＃34 ;：＆＃34; D3＆＃34;＆＃34;得分＆＃34;：22}]}，＆＃34;成功＆＃34;：真}

然后它将内部图表显示为完整的甜甜圈，但外部图表显示为圆弧而不是完整的圆环。当鼠标悬停在第二个图表上时，鼠标会发生同样的问题，并且所有内容都正确地作为工具提示。（我没有包含工具提示的代码）。但是，我将鼠标移交给ABC并将其返回DEFA。所以，我认为必须有一些与我附加这两个弧的方式相关的东西。

编辑1 使用我的数据集创建了JSFidle并且它没有显示任何内容

http://jsfiddle.net/pcr3ogt4/

D3.js - 带有多个环的圆环图单击事件

0 个答案: