Question

我创建了一个与此example类似的垂直100％条形图，但使用了泰坦尼克号数据集。默认工具提示显示正确的百分比，但我修改的工具提示没有。在下图中，工具提示应显示73％，即存活的女性百分比，而不是100％。

似乎我的代码给了我正确的百分比，因为它是关于变量性别的聚合，而不是沿着Survived /不存活的维度。代码片段如下。通过单击菜单定义变量'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％条形图中获得正确的百分比

1 个答案: