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

debugcn 发表于 Dev

用户名

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

    <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>

奇恩

我假设你正在使用的labratrevenge / D3尖脚本得到提示就像在这里

这意味着您需要具有将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上的作用。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。