在 dimplejs 垂直 100% 条形图中获取正确的百分比

Question

我创建了一个类似于此的垂直 100% 条形图 example but with the Titanic dataset. The default tooltip shows the correct percentages but my modified tooltip does not. In the figure below, the tooltip should show 73%, which is the percentage of women that survived, instead of 100%.

似乎我的代码给出了正确的百分比，因为它是根据变量 Sex 聚合的，而不是沿着 Survived/Did not survive 的维度聚合的。下面的代码片段。变量 'source' 通过单击菜单定义。

d3.tsv("data/titanic.tsv", function(data) {

    var myChart = new dimple.chart(svg, data);
    var x = myChart.addCategoryAxis("x", source); 
    x.addOrderRule(source);
    var y = myChart.addPctAxis("y", "count");
    var mySeries = myChart.addSeries(["Survived"], dimple.plot.bar);

对于工具提示：

    mySeries.addEventHandler("mouseover", function (e) {
      var cx = parseFloat(e.selectedShape.attr("x"));
      var cxWidth = parseFloat(e.selectedShape.attr("width"));
      var cy = parseFloat(e.selectedShape.attr("y"));

      // set size and coordinates of tooltip
      var width = 120;
      var height = 50;
      var xPop = (cx +width + 10 < svg.attr("width")) ? cx: cx ;
      var yPop = (cy - height / 2 < 0) ? 25: cy - height / 2 + 35;

      popup = svg.append("g");

      // change style of tooltip
      popup
          .append("rect")
          .attr("x", xPop + 5)
          .attr("y", yPop - 5)
          .attr("width", 150)
          .attr("height", height)
          .attr("width", width)
          .attr("rx", 5)
          .attr("ry", 5)
          .style("fill", "white")
          .style("stroke", "#36b0b6")
          .style("stroke-width", 2);

      //add appropriate text to tooltip
      popup
        .append('text')
        .attr('x', xPop + 10)
        .attr('y', yPop + 10)
        .append('tspan')
        .attr('x', xPop + 10)
        .attr('y', yPop + 20)
        .text(e.seriesValue[0])
        .style("font-family", "sans-serif")
        .style("font-size", 10)
        .append('tspan')
        .attr('x', xPop + 10)
        .attr('y', yPop + 40)
        .text("Percent: " + d3.format(",.0f")(e.yValue *100))
        .style("font-family", "sans-serif")
        .style("font-size", 10);
   });

感谢 Anna Pawlicka 原始工具提示代码。我玩过 yValue、seriesValue 和 aggField。我可以通过

之类的硬编码获得正确的百分比显示

if (e.xValue==="Female" && e.seriesValue[0]==="Survived") {
           var t = 337/464 }

但这不是最优雅的解决方案。

关于我遗漏的任何想法？

Answer 1

您这样做的方式是有道理的，但是 eventArgs 中存在一个疏忽，导致它发送运行总计而不是该段的总计。您可以通过使用 d3 方法应用事件处理程序来解决它。在调用 draw 函数后移动代码很重要，此时您可以访问 d3 形状并使用 on:

应用事件处理程序

// Must draw first
myChart.draw();

// Can now access series.shapes for d3 stuff
mySeries.shapes.on("mouseover", function (d) {

    // d contains the full data element as used by dimple's internal methods
    var cx = parseFloat(e.selectedShape.attr("x"));
    var cxWidth = parseFloat(e.selectedShape.attr("width"));
    var cy = parseFloat(e.selectedShape.attr("y"));

    // set size and coordinates of tooltip
    var width = 120;
    var height = 50;
    var xPop = (cx +width + 10 < svg.attr("width")) ? cx: cx ;
    var yPop = (cy - height / 2 < 0) ? 25: cy - height / 2 + 35;

    popup = svg.append("g");

    // change style of tooltip
    popup
        .append("rect")
        .attr("x", xPop + 5)
        .attr("y", yPop - 5)
        .attr("width", 150)
        .attr("height", height)
        .attr("width", width)
        .attr("rx", 5)
        .attr("ry", 5)
        .style("fill", "white")
        .style("stroke", "#36b0b6")
        .style("stroke-width", 2);

    //add appropriate text to tooltip
    popup
        .append('text')
        .attr('x', xPop + 10)
        .attr('y', yPop + 10)
        .append('tspan')
        .attr('x', xPop + 10)
        .attr('y', yPop + 20)
        .text(e.seriesValue[0])
        .style("font-family", "sans-serif")
        .style("font-size", 10)
        .append('tspan')
        .attr('x', xPop + 10)
        .attr('y', yPop + 40)

         // Now you just need to use height instead of yValue
        .text("Percent: " + d3.format("%")(e.height))

        .style("font-family", "sans-serif")
        .style("font-size", 10);
  });

除了使用 on 代替 addEventHandler 和使用 height 代替 yValue 之外，代码与您的相同。

在 dimplejs 垂直 100% 条形图中获取正确的百分比

Get correct percent in dimplejs vertical 100% bar chart

dimple.js