Question

我想永久地在我的折线图上有“工具提示”（换句话说，我想要标签）。我为此编写的代码如下，但它甚至没有在我的图表上显示任何此类工具提示/标签。会出现什么问题？

<!DOCTYPE   html>
<style>
    body {
        font: 15px sans-serif;
    }
    .axis line, .axis path {
        fill:  none;
        stroke: gray;
        stroke-width:4;
        shape-rendering: crispEdges;
    }
    div.tooltip {   
        position: absolute;           
        text-align: center;           
        width: 60px;                  
        height: 28px;                 
        padding: 2px;             
        font: 12px sans-serif;        
        background: lightsteelblue;   
        border: 0px;      
        border-radius: 8px;           
        pointer-events: none;         
    }

    .line {
        fill: none;
        stroke: steelblue;
        stroke-width: 3px;
    }
</style>
<html>
<body>
<script type="text/javascript" src="d3.v3.min.js"></script>
<script type="text/javascript">

    var data = [
      {time:0,ftRem1:100,ftRem2:100,ftRem3:100},{time:4,ftRem1:95.7,ftRem2:89.4,ftRem3:88.9},
      {time:4.5,ftRem1:94.9,ftRem2:87.3,ftRem3:86.7},{time:8.5,ftRem1:93.8,ftRem2:84.3,ftRem3:83.2},
      {time:32.5,ftRem1:91.2,ftRem2:76.8,ftRem3:73.7},{time:56.5,ftRem1:87.8,ftRem2:67.1,ftRem3:61.7},
      {time:58.5,ftRem1:87.5,ftRem2:66.4,ftRem3:60.8},{time:82.5,ftRem1:83.7,ftRem2:55.7,ftRem3:47.6},
      {time:94.5,ftRem1:82.3,ftRem2:51.5,ftRem3:42.4}
    ];

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

    var color = d3.scale.category10();

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

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

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

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

    var chart = 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+")");

    var line = d3.svg.line()
        .x(function(d){return x(d.hours);})
        .y(function(d){return y(d.ftRem);})
        .interpolate("linear");

    color.domain(d3.keys(data[0]).filter(function(d){ return d!='time' }));
    var points = color.domain().map(function(duration){
        return {
            ftPoints:duration,
            values: data.map(function(d){
            return{hours: d.time,ftRem: d[duration]};
        })
      }
    });

    x.domain([0,d3.max(data,function(d){return d.time})]);
    y.domain([
        0,
        d3.max(points,function(c){ return d3.max(c.values,function(d){ return d.ftRem;});})
    ]);
    chart.append("g")
        .attr("class","x axis")
        .attr("transform","translate(0,"+height+")")
        .call(xAxis);
    chart.append("g")
        .attr("class","y axis")
        .call(yAxis);

    var freshTime=chart.selectAll(".ftpoint")
        .data(points)
        .enter().append("g")
        .attr("class","ftpoint");

    freshTime.append("path")
        .attr("class","line")
        .attr("d",function(d,i){return line(d.values);})

    var lineColor = ["#1abc9c","#3498db","#e74c3c"];
    freshTime.select(".line")
        .style("stroke",function(d,i){return lineColor[i];})

    Step = ["","a","b","c","d","e","f","g","h"];

    var tooltip = chart.selectAll(".tooltip")
        .data(points[0].values)
       .enter()
        .append("div")
        .attr("class","tooltip")
        .style("left", function (d) { return y(d.hours)+"px";})
        .style("top", function (d) { return x(d.ftRem)+"px";})
        .text(function(d,i) { return Step[i]; });

</script>
</body>
</html>

Answer 1

如果在图表中仅使用svg元素，那将会更好。混合和匹配svg和div是不切实际的。所以，您可以使用svg element text作为标签（为了标签的目的，您创建了类“工具提示”，也许您应该更改类的名称，因为您实际上需要标签，而不是工具提示）：

var tooltip = chart.selectAll(".tooltip")
                   .data(points[0].values)
                  .enter()
                   .append("text")
                   .attr("class","tooltip")
                   .attr("y", function (d) { return y(d.hours)+"px";})
                   .attr("x", function (d) { return x(d.ftRem)+"px";})
                   .text(function(d,i) { return Step[i]; });

（注意：如果你做了这个改变，会出现标签，但我猜他们的位置不好，但那是你必须解决的不同类型的问题）

D3折线图上的标签不起作用

1 个答案: