Question

我有一个angular 5项目，我正在使用d3js v5创建一个堆积的条形图。当前，在将鼠标悬停在栏上时会显示工具提示，我想如何以其他格式显示工具提示。

以下屏幕截图显示了条形图。

因此我的有角项目可在https://github.com/prasanthmp500/stackedbargraph-tooltip-troubleshooting上找到。

您可以通过以下方式运行项目 1）git clone https://github.com/prasanthmp500/stackedbargraph-tooltip-troubleshooting 2）cd stackedbargraph-tooltip-故障排除 3）npm安装 4）ng服务

然后您可以从http://localhost:4200访问该项目。

用于显示条形图的代码位于项目内的src / app / app.component.ts中。该条是使用drawSvg（）函数中存在的伪数据生成的

let data = [ { "dateRange" : "2019-12-12" ,total: 350, 
delivered : 200, failed:50, processing:100}];

当我将鼠标悬停在显示数量的条的绿色，蓝色和红色条部分上时，当前会显示工具提示。例如，当我将鼠标悬停在蓝色部分上时，工具提示将在一个小框中显示数字200。但是，我想以这种方式显示工具提示，以便将鼠标悬停在栏的任何部分上时，应该将所有4个变量都放置在上面。我怎样才能做到这一点。

   date : 2019-12-12
   delivered : 200
   failed : 50
   processing: 100
   total : 350

以下是绘制这些条的代码，这些条存在于从AppComponent类的ngOnit（）方法调用的drawSvg（）函数中。

export class AppComponent  implements OnInit {

  title = 'stackedbarchart-tooltip';

  ngOnInit() {
    this.drawSvg()
  }

    drawSvg() {


       let data = [ { "dateRange" : "2019-12-12" ,total: 350, delivered : 200, failed:50, processing:100}];

      d3.selectAll('div#histogramHolder svg').remove();

      // set the dimensions and margins of the graph
      const margin = {top: 10, right: 20, bottom: 60, left: 60},
      width = 960 - margin.left - margin.right,
      height = 600 - margin.top - margin.bottom;

      const svg = d3.select("div#histogramHolder").append("svg")
                  .attr("width", width + margin.left + margin.right)
                  .attr("height", height + margin.top + margin.bottom);

      const g = svg.append("g");
      g.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      // set x scale
      const x = d3.scaleBand().rangeRound([0, width]).paddingInner(0.1).paddingOuter(0.5).align(0.1);

      // set y scale
      const y = d3.scaleLinear().rangeRound([height, 0]);

      // set the colors
       const z = d3.scaleOrdinal().range([ "#0000ff" ,  "#00ff00","#ff0000" ]);

      const keys = [ "delivered", "processing","failed" ];

      x.domain(data.map(function(d) { return d.dateRange; }));
      y.domain([0, d3.max(data, function(d) { return d.total; })]).nice();
      z.domain(keys);




      // Prep the tooltip bits, initial display is hidden
      // const tooltip = svg.append("g").attr("class", "tooltip").style("display", "none");

      const tooltip = svg.append("g").attr("class", "tooltip");

      tooltip.append("rect").attr("width", 60).attr("height", 20).attr("fill", "black").style("opacity", 0.5);

      tooltip.append("text").attr("x", 30).attr("dy", "1.2em").style("text-anchor", "middle").attr("font-size", "12px")
      .attr("font-weight", "bold");

      g.append("g")
      .selectAll("g")
      .data(d3.stack().keys(keys)(data))
      .enter().append("g")
      .attr("fill", function(d) { 

        return z(d.key);
       })
      .selectAll("rect")
          .data(function(d) { return d; })
          .enter().append("rect")
          .attr("x", function(d) { return x(d.data.dateRange); })
          .attr("y", function(d) { return y(d[1]); })
          .attr("height", function(d) { return y(d[0]) - y(d[1]); })
          .attr("width", x.bandwidth())
          .on("mouseover", function() { tooltip.style("display", null); })
          .on("mouseout", function() { tooltip.style("display", "none"); })
          .on("mousemove", function(d) {
            const xPosition = d3.mouse(this)[0] - 5;
            const yPosition = d3.mouse(this)[1] - 5;
          tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
          tooltip.select("text").text(d[1]-d[0]);
          });

      g.append("g")
          .attr("class", "axis")
          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(x))
          .selectAll("text")    
            .style("text-anchor", "middle")
            .attr("dx", "3em")
            .attr("dy", "1em")
            .attr("transform", "rotate(30)");


      g.append("g")
        .attr("class", "axis")
        .call(d3.axisLeft(y).ticks())
        .append("text")
        .attr("x", 2)
        .attr("y", y(y.ticks().pop()) + 0.5)
        .attr("dy", "0.32em")
        .attr("fill", "#000")
        .attr("font-weight", "bold")
        .attr("text-anchor", "start");

      const legend = g.append("g")
        .attr("font-family", "sans-serif")
        .attr("font-size", 10)
        .attr("text-anchor", "end")
        .selectAll("g")
        .data(keys.slice())
        .enter().append("g")
        .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

      legend.append("rect")
        .attr("x", width - 19)
        .attr("width", 19)
        .attr("height", 19)
        .attr("fill", z);

      legend.append("text")
        .attr("x", width - 24)
        .attr("y", 9.5)
        .attr("dy", "0.32em")
        .text(function(d) { 
          return d.charAt(0).toUpperCase() + d.slice(1) ; });

      }
}

我的项目已按照此示例进行建模 https://bl.ocks.org/mjfoster83/7c9bdfd714ab2f2e39dd5c09057a55a0

非常感谢您的帮助谢谢

如何在使用d3js开发的堆叠条形图中显示工具提示？

0 个答案: