为什么我的d3.tooltip不适用于这两行？

时间：2014-07-25 08:03:30

标签： html json d3.js visualization linechart

以下是用于创建折线图的代码。但我面临的问题是，我的d3tool线路提示不起作用。此外，我希望能够缩短y轴，使得线条之间的间隙更大。 

    <!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>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>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>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(10);

        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   = parseDate(d.year.toString());
                d.male  = +d.male;
                d.female = +d.female;
                d.both = +d.both;
            });

            x.domain(d3.extent(data, function (d) { return d.year; }));
            y.domain([0, d3.max(data, function (d) { return d.male; })]);
            y1.domain([0, d3.max(data, function (d) { return d.female; })]);
            y2.domain([0, d3.max(data, function (d) { return d.both; })]);

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

            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.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 y1(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 y2(datum.both)})
                    .attr('r', 3)
                    .attr('fill', 'blue')   
                    .on('mouseover', tip2.show)
                    .on('mouseout', tip2.hide);

            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));
        });
    </script></div>

这是我创建的折线图。 d3.tool提示不能像我想要的那样工作，因为只有一个d3.tool提示在一行上工作但其他行没有出现在其他行上。我想显示y轴在每个值之间有更大的间隙，换句话说，这意味着线之间的间隙会更大，以便人们可以轻松地分析图形。我有什么方法可以这样做吗？

Life Expectancy

这是我正在使用的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"}]

1 个答案:

答案 0 :(得分：0)

您的代码存在问题，因为工具提示使用不同的y比例。你使用相同的y比例的线条，所以它们看起来很好。但是当你对圆圈使用不同的y刻度时，它们将以不同的方式绘制。所以没有

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

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

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

和

y.domain([0, d3.max(data, function (d) { return d.male; })]);
y1.domain([0, d3.max(data, function (d) { return d.female; })]);
y2.domain([0, d3.max(data, function (d) { return d.both; })]);

你可以使用

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

和

y.domain([50, 90]);

然后在添加圆圈时使用相同的y比例。

请注意，我还将您的域起始值从0更改为50.这将有助于缩短y比例并缩小行数。

您可以在http://jsfiddle.net/B6cUS/

看到现场演示
相关问题
最新问题