Question

我正在尝试使用线图中的工具提示，但我不明白为什么工具提示值不会出现。我想在渲染线图时，在特定数字中添加圆形符号“o”.i表示添加一些圆圈符号。请在下面找到我的脚本

    <script>
        function ShowLineChart() {

            var data = [
        { date: "1-jan-12", close: 5 },
        { date: "1-Feb-12", close: 100 },
        { date: "1-mar-12", close: 150 },
        { date: "1-apr-12", close: 90 },
        { date: "1-May-12", close:34 },
        { date: "1-jun-12", close: 67 },
        { date: "1-jul-12", close:67 },
        { date: "1-Aug-12", close: 79 }
    ];
            var margin = { top: 20, right: 20, bottom: 30, left: 50 },
    width = 460 - margin.left - margin.right,
    height = 200 - margin.top - margin.bottom;

            var parseDate = d3.time.format("%d-%b-%y").parse;

            var x = d3.time.scale()
    .range([0, width]);

            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");

            var line = d3.svg.line()
    .x(function (d) { return x(d.date); })
    .y(function (d) { return y(d.close); });


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

            var svg = d3.select("#showLineChart").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);

                data.forEach(function (d) {
                    d.date = parseDate(d.date);
                    d.close = +d.close;
                });

                x.domain(d3.extent(data, function (d) { return d.date; }));
                y.domain(d3.extent(data, function (d) { return d.close; }));

                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("Price ($)")

                svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line)
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide)
      .attr("y", function (d) { return d.close; })


        }
</script>

Answer 1

我假设您使用labratrevenge/d3-tip脚本获取here

中的工具提示

这意味着您需要有元素来附加tip.hide和tip.show回调。

您可以通过向图表添加圆点并将回调附加到这些点来执行此操作：

svg.selectAll(".circle")
     .data(data)
     .enter()
     .append("svg:circle")
     .attr("class", "circle")
     .attr("cx", function (d) {
        return x(d.date);
     })
     .attr("cy", function (d) {
       return y(d.close);
     })
     .attr("r", 5)
     .on('mouseover', tip.show)
     .on('mouseout', tip.hide)

在jsfiddle上查看它。

如何使用D3 js在线条图中使用工具提示

1 个答案: