Question

下面是创建折线图的代码，我想在折线图中为每一行添加标签，但我不知道要添加到代码中的属性。那么，无论如何我都要在标签中加入线条吗？

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

    body {
      font: 10px sans-serif;
    }

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

    .x.axis path {
      display: black    ;
    }

    .line {
      fill: none;
      stroke: steelblue;
      stroke-width: 1.5px;

    }

    h3 {
      margin-left:220px;
    }
    .d3-tip {
      line-height: 1;
      font-weight: bold;
      padding: 12px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 2px;
    }
    </style>
    <div>
        <h3>Life Expectancy History</h3>

    <body>
    <script src="http://d3js.org/d3.v3.js"></script>
        <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
    <script>
    var margin = { top: 30, right: 40, bottom: 30, left: 50 },
            width = 600 - margin.left - margin.right,
            height = 270 - margin.top - margin.bottom;

    var tip = d3.tip()
      .attr('class', 'd3-tip')
      .offset([-10, 0])
      .html(function(d) {
        return "<strong>Year:</strong> <span style='color:white'>" + d.year + "</br><strong>Male:</strong> <span style='color:white'>" + d.male + "%" + "</span></br><strong>World Rank:</strong> <span style='color:white'>" + d.rankmale;
      });

    var tip1 = d3.tip()
      .attr('class', 'd3-tip')
      .offset([-10, 0])
      .html(function(d) {
        return "<strong>Year:</strong> <span style='color:white'>" + d.year + "</br><strong>Female:</strong> <span style='color:white'>" + d.female + "%" + "</span></br><strong>World Rank:</strong> <span style='color:white'>" + d.rankfemale;
      });

    var tip2 = d3.tip()
      .attr('class', 'd3-tip')
      .offset([-10, 0])
      .html(function(d) {
        return "<strong>Year:</strong> <span style='color:white'>" + d.year + "</br><strong>Both Gender:</strong> <span style='color:white'>" + d.both + "%" + "</span></br><strong>World Rank:</strong> <span style='color:white'>" + d.rankall;
      }); 
        var parseDate = d3.time.format("%Y").parse;

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

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

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

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

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

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

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

        var line2 = d3.svg.line()
            .x(function (d) { return x(d.year); })
            .y(function (d) { return y(d.female); });

        var line3 = d3.svg.line()
            .x(function (d) { return x(d.year); })
            .y(function (d) { return y(d.both); });     

        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).call(tip1).call(tip2);

        d3.json("lifehistory.json", function (error, data) {
            data.forEach(function (d)
            {
                d.year   = +d.year;
                d.male  = +d.male;
                d.female = +d.female;
                d.both = +d.both;
            });

            x.domain(d3.extent(data, function (d) {
              return d.year;
            }));
            y.domain([60, 85]);

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

            svg.append("text")      // text label for the x axis
              .attr("x", 265)
              .attr("y", 240)
              .style("text-anchor", "middle")
              .text("Year");

            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("Life Expectancy History");

            svg.append("path")
                .datum(data)
                .attr("class", "line")
                .style("stroke", "red")
                .attr("d", line(data));

            svg.append("path")
                .datum(data)
                .attr("class", "line")
                .attr("d", line2(data));

            svg.append("path")
                .datum(data)
                .attr("class", "line")
                .attr("d", line3(data));

            svg.selectAll('.yaxis1')
                .data(data)
                .enter()
                .append('circle')
                .attr('class', 'yaxis1')
                .attr('cx', function (datum) {
                return x(datum.year)
                })
                .attr('cy', function (datum) {
                return y(datum.male)
                })
                .attr('r', 3)
                .attr('fill', 'red')
                .on('mouseover', tip.show)
                .on('mouseout', tip.hide);

                svg.selectAll('.yaxis2')
                .data(data)
                .enter()
                .append('circle')
                .attr('class', 'yaxis2')
                .attr('cx', function (datum) {
                return x(datum.year)
                })
                .attr('cy', function (datum) {
                return y(datum.female)
                })
                .attr('r', 3)
                .attr('fill', 'blue')
                .on('mouseover', tip1.show)
                .on('mouseout', tip1.hide);

                svg.selectAll('.yaxis3')
                .data(data)
                .enter()
                .append('circle')
                .attr('class', 'yaxis3')
                .attr('cx', function (datum) {
                return x(datum.year)
                })
                .attr('cy', function (datum) {
                return y(datum.both)
                })
                .attr('r', 3)
                .attr('fill', 'blue')
                .on('mouseover', tip2.show)
                .on('mouseout', tip2.hide);
        });

    </script></div>

我正在使用的JSON文件。

[{"year":"1960","male":"61.7","female":"65.7","both":"63.7","rankmale":"47","rankfemale":"50","rankall":"45"},
{"year":"1970","male":"65.4","female":"70.2","both":"67.7","rankmale":"45","rankfemale":"45","rankall":"44"},
{"year":"1980","male":"68.9","female":"74.2","both":"71.5","rankmale":"33","rankfemale":"36","rankall":"29"},
{"year":"1990","male":"71.9","female":"76.9","both":"74.3","rankmale":"28","rankfemale":"30","rankall":"30"},
{"year":"2000","male":"76.1","female":"80.1","both":"78.1","rankmale":"11","rankfemale":"24","rankall":"15"},
{"year":"2011","male":"80.1","female":"84.6","both":"82.3","rankmale":"6","rankfemale":"8","rankall":"5"}]

Line Chart

如何在折线图中为每条线添加标签？

0 个答案: