Как показать всплывающую подсказку в центре круга на графике рассеяния D3? - PullRequest
Новая
       57

Как показать всплывающую подсказку в центре круга на графике рассеяния D3?

2 голосов
/ 21 октября 2019

Я использую диаграмму рассеяния d3, которая показывает всплывающую подсказку по клику любого круга. Я должен показать всплывающую подсказку, которая рисуется из центра круга в виде диалогового окна. 

var div = d3.select("body").append("div")
      .attr("class", "tooltip1")
      .style("opacity", 0);
    svg.append("g")
      .classed("x-axis", true)
      .attr("transform", "translate(0, " + (chart_height - padding) + ")")
      .call(x_axis)
    svg.append("text")
      .attr("class", "font-12 font-weight-bold")
      .attr("text-anchor", "middle")
      .attr("transform", "translate(" + (padding / 4) + "," + (chart_height / 1.5) + ")rotate(-90)")
      .text("OUTLETS");
    // create y_axis
    var y_axis = d3.axisLeft(y_scale)
      .ticks(10)
    svg.append("g")
      .classed("y-axis", true)
      .attr("transform", "translate(" + padding + ",-10)")
      .call(y_axis)

    // add circles
    svg.selectAll("circle")
      .data(data)
      .enter()
      .append("circle")
      .attr("cx", function (d) {
        return x_scale(d.Staff_count)
      })
      .attr("cy", function (d) {
        return y_scale(d.Outlets)
      })
      .attr("r", function (d) {
        return a_scale(d.Total_Sales)
      })
      .attr("fill", function (d) { return scatter_color(d.Total_Sales) })
      .on("click", function (d) {
        var st = state_ == 'India' ? d.State : d.District
        var colnme = state_ == 'India' ? 'State / Union Territory' : 'District'
        var arr = f_st_dist(list_names, colnme, st)
        var div_html = summary_config['scatter_div']
        var div_end = "<hr>" + "</div></div>" + ""
          _.each(arr, function (x) {
            div_end += div_html + "<span class='pr-5'>" + x.Company + "</span>" + "<span class='font-weight-bolder'>" + (indian_number_format(x.Total_Sales)) + "</span>" + "</div></div>"
          })
        $(".tooltip1").show()
        div.transition()
          .duration(100)
          .style("opacity", .9);
        if (state_ == 'India') {
          var btn_html = summary_config['btn_html']
          div.html(div_html + "<div class = 'custom_clr'>" + d.State + "</div>" + div_end + btn_html +" id='" + d.State + "'>District Details ></button>")
            .style("left", (d3.event.pageX) + "px")
            .style("top", (d3.event.pageY - 28) + "px");
        } else {
          div.html(div_html + "<div class = 'custom_clr'>" + "</div>" + d.District + div_end )
            .style("left", (d3.event.pageX) + "px")
            .style("top", (d3.event.pageY - 28) + "px");
        }
        tooltip_load()
        d3.event.stopPropagation()
      })

Мне нужно показать мою подсказку, как это подсказка Может кто-нибудь помочь мне, как решить эту проблему?

...