d3-tip：当我显示多个图表

Question

当我在具有更多图表的页面中使用d3-tip时，工具提示出现在屏幕左侧的错误位置（如x = 0），而不是在水平条形图的右侧。 我尝试过重命名变量，但没有。有什么建议吗？ 提前谢谢！

    <!-- Chart1 ....... -->
    <section class="box-big-comment">
        <div class="row">
            <div class="col-lg-5 col-md-5">
            </div>
            <div id="ig2" class="col-lg-6 col-md-6">
                <script src="d3/d3.min.js" charset="utf-8"></script>
                <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

              <script type="text/javascript">

            //Width and height
        var m = [40, 10, 10, 100],
        w = 600 - m[1] - m[3],
        h = 600 - m[0] - m[2];

        var format = d3.format(".0%");

        var x = d3.scale.linear().range([0, w]),
            y = d3.scale.ordinal().rangeRoundBands([0, h], .1);

        var xAxis = d3.svg.axis().scale(x).orient("top").tickSize(-10).tickFormat(format),
            yAxis = d3.svg.axis().scale(y).orient("left").tickSize(10);

            var tip1 = d3.tip()
              .attr('class', 'd3-tip')
              .offset([0, 20])

              .direction('e')
              .html(function(d) {
                return "Value:  <span style='color:steelblue'>" +"<b>"+ Math.round(d.value)+"%</b>" + "</span>";
              })

        var svg = d3.select("#ig2").append("svg")
            .attr("width", w + m[1] + m[3])
            .attr("height", h + m[0] + m[2])
            .append("g")
            .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

            svg.call(tip1);

        d3.csv("data_a.csv", function(data) {

          // Parse numbers, and sort by value.
          data.forEach(function(d) { d.value = +d.value; });
          data.sort(function(a, b) { return b.value - a.value; });

          // Set the scale domain.
          x.domain([0, d3.max(data, function(d) { return d.value; })]);
          y.domain(data.map(function(d) { return d.name; }));

          var bar = svg.selectAll("g.bar")
              .data(data)
            .enter().append("g")
              .attr("class", "bar")
              .on('mouseover', tip1.show)
      .on('mouseout', tip1.hide)
              .attr("transform", function(d) { return "translate(0," + y(d.name) + ")"; });

          bar.append("rect")
              .attr("width", function(d) { return x(d.value); })
              .attr("height", y.rangeBand());

          /*bar.append("text")
              .attr("class", "value")
              .attr("x", function(d) { return x(d.value); })
              .attr("y", y.rangeBand() / 2)
              .attr("dx", -5)
              .attr("dy", ".35em")
              .attr("text-anchor", "end")
              .style("font-size", "12px")

              .text(function(d) { return format(d.value); });*/

          svg.append("g")
              .attr("class", "x axis")
              .style("font-size", "12px")
              .call(xAxis)
              .append("text")
                .attr("x", w )
                .attr("y", m[0]-75)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("Value");

          svg.append("g")
              .attr("class", "y axis")
              .style("font-size", "12px")
              .call(yAxis);
        });

function type(d) {
  d.value = +d.value;
  return d;
}

    </script>

            </div>
            <div class="col-lg-1 col-md-1">
            </div>
        </div>
    </section>


<!-- Chart2 ....... -->
    <section class="box-big-comment">
        <div class="row">
            <div class="col-lg-5 col-md-5">
            </div>
            <div id="ig3" class="col-lg-6 col-md-6">
                <script src="d3/d3.min.js" charset="utf-8"></script>
                <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

              <script type="text/javascript">

            //Width and height
        var m = [40, 10, 10, 100],
        w = 600 - m[1] - m[3],
        h = 600 - m[0] - m[2];

        var format = d3.format(".0%");

        var x = d3.scale.linear().range([0, w]),
            y = d3.scale.ordinal().rangeRoundBands([0, h], .1);

        var xAxis = d3.svg.axis().scale(x).orient("top").tickSize(-10).tickFormat(format),
            yAxis = d3.svg.axis().scale(y).orient("left").tickSize(10);

            var tip2 = d3.tip()
              .attr('class', 'd3-tip')
              .offset([0, 20])

              .direction('e')
              .html(function(d) {
                return "Value:  <span style='color:steelblue'>" +"<b>"+ Math.round(d.value)+"%</b>" + "</span>";
              })

        var svg2 = d3.select("#ig3").append("svg")
            .attr("width", w + m[1] + m[3])
            .attr("height", h + m[0] + m[2])
            .append("g")
            .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

            svg.call(tip2);

        d3.csv("data_b.csv", function(data) {

          // Parse numbers, and sort by value.
          data.forEach(function(d) { d.value = +d.value; });
          data.sort(function(a, b) { return b.value - a.value; });

          // Set the scale domain.
          x.domain([0, d3.max(data, function(d) { return d.value; })]);
          y.domain(data.map(function(d) { return d.name; }));

          var bar = svg2.selectAll("g.bar")
              .data(data)
            .enter().append("g")
              .attr("class", "bar")
              .on('mouseover', tip2.show)
      .on('mouseout', tip2.hide)
              .attr("transform", function(d) { return "translate(0," + y(d.name) + ")"; });

          bar.append("rect")
              .attr("width", function(d) { return x(d.value); })
              .attr("height", y.rangeBand());

          /*bar.append("text")
              .attr("class", "value")
              .attr("x", function(d) { return x(d.value); })
              .attr("y", y.rangeBand() / 2)
              .attr("dx", -5)
              .attr("dy", ".35em")
              .attr("text-anchor", "end")
              .style("font-size", "12px")

              .text(function(d) { return format(d.value); });*/

          svg2.append("g")
              .attr("class", "x axis")
              .style("font-size", "12px")
              .call(xAxis)
              .append("text")
                .attr("x", w )
                .attr("y", m[0]-75)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("Value");

          svg2.append("g")
              .attr("class", "y axis")
              .style("font-size", "12px")
              .call(yAxis);
        });

function type(d) {
  d.value = +d.value;
  return d;
}

    </script>

            </div>
            <div class="col-lg-1 col-md-1">
            </div>
        </div>
    </section> 

Answer 1

看起来你只是把两张图表划掉了：

上面的代码有svg.call（tip2）而不是svg2.call（tip2）

您还需要在d3.tip().attr('class', 'tip-class')

中为tip1和tip2设置不同的类

以下是d3.js工具提示中带有两个图表的示例：

<!DOCTYPE html>
<meta charset="utf-8">
<style>

  body {
    font: 10px sans-serif;
  }

  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }

  .bar {
    fill: orange;
  }

  .bar:hover {
    fill: orangered ;
  }

  .x.axis path {
    display: none;
  }

  .d3-tip,
  .d3-tip-2 {
    line-height: 1;
    font-weight: bold;
    padding: 12px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 2px;
  }

  /* Creates a small triangle extender for the tooltip */
  .d3-tip:after,
  .d3-tip-2:after {
    box-sizing: border-box;
    display: inline;
    font-size: 10px;
    width: 100%;
    line-height: 1;
    color: rgba(0, 0, 0, 0.8);
    content: "\25BC";
    position: absolute;
    text-align: center;
  }

  /* Style northward tooltips differently */
  .d3-tip-2.n:after,
  .d3-tip.n:after {

    margin: -1px 0 0 0;
    top: 100%;
    left: 0;
  }
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script>

  var margin = {top: 40, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

  var formatPercent = d3.format(".0%");

  var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

  var y = d3.scale.linear()
    .range([height, 0]);

  var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

  var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(formatPercent);

  var tip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(function(d) {
      return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>";
    })

  var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  svg.call(tip);

  var data = [
    {letter: "A", frequency: .08167},
    {letter: "B", frequency: .01492},
    {letter: "C", frequency: .02780},
    {letter: "D", frequency: .04253},
    {letter: "E", frequency: .12702},
    {letter: "F", frequency: .02288},
    {letter: "G", frequency: .02022},
    {letter: "H", frequency: .06094},
    {letter: "I", frequency: .06973},
    {letter: "J", frequency: .00153},
    {letter: "K", frequency: .00747},
    {letter: "L", frequency: .04025},
    {letter: "M", frequency: .02517},
    {letter: "N", frequency: .06749}
  ];

    x.domain(data.map(function(d) { return d.letter; }));
    y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Frequency");

    svg.selectAll(".bar")
      .data(data)
      .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.letter); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.frequency); })
      .attr("height", function(d) { return height - y(d.frequency); })
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide)


  var tip2 = d3.tip()
    .attr('class', 'd3-tip-2')
    .offset([-10, 0])
    .html(function(d) {
      return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>";
    })

  var svg2 = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  svg2.call(tip2);

    x.domain(data.map(function(d) { return d.letter; }));
    y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

    svg2.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

    svg2.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Frequency");

    svg2.selectAll(".bar")
      .data(data)
      .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.letter); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.frequency); })
      .attr("height", function(d) { return height - y(d.frequency); })
      .on('mouseover', tip2.show)
      .on('mouseout', tip2.hide)

  function type(d) {
    d.frequency = +d.frequency;
    return d;
  }

</script>