Question

我正在尝试使用工具提示构建一个简单的D3折线图。我根据这里的脚本构建了折线图：http://bl.ocks.org/d3noob/e34791a32a54e015f57d。然后我尝试在此处根据脚本添加工具提示：http://bl.ocks.org/mbostock/3902569。一切正常，直到我添加了“焦点”和交互性部分。整个图表变成了一个巨大的黑色块。我想也许是因为我的两条线不是单独的目标？ ...但我不知道如何解决它。在此先感谢!!!

这是我的剧本：

<body>
    <h1>Missouri Per Capita Personal Income</h1>
    <p>Missouri per capita personal income is lower than the national average, according to latest data avaliable.</p>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="https://d3js.org/d3-time-format.v2.min.js"></script>
    <script>

    var parseDate = d3.time.format("%Y").parse;
        bisectDate = d3.bisector(function(d) {return d.Year; }).left
        formatValue = d3.format("")
        formatCurrency = function(d) {return "$" + formatValue(d);};

    var margin = {top: 40, right: 120, bottom: 60, left: 110},
        width = 950 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom,
        // labelPadding = 3;

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

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

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

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

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

    var line = d3.svg.line()
        .x(function(d) {return x(d.Year); })
        .y(function(d) {return y0(d.USA); });

    var line2 = d3.svg.line()
        .x(function(d) {return x(d.Year); })
        .y(function(d) {return y1(d.MO); });

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

    d3.csv("data.csv", function(error, data) {
        data.forEach(function(d) {
            d.Year = parseDate(d.Year);
            d.USA = +d.USA;
            d.MO = +d.MO;
        });

    x.domain(d3.extent(data, function(d) {return d.Year; }));
    y0.domain ([0, d3.max(data, function(d){return Math.max(d.USA);})]);
    y1.domain([0, d3.max(data, function(d){ return Math.max(d.USA);})]);

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

    svg.append("path")
        .style("stroke", "rgb(0,223,255)")
        .attr("d", line2(data));

    svg.append("g")
        .attr("class","x axis")
        .attr("transform","translate(0," + height + ")")
        .call(xAxis)
    .append("text")
        .attr("x", 360)
        .attr("y", 50)
        .attr("dx", ".71em")
        .style("text-anchor","end")
        .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("Dollars ($)");

    var focus = svg.append("g")
        .attr("class","focus")
        .style("display","none");

    focus.append("circle")
        .attr("r", 4.5);

    focus.append("text")
        .attr("x", 9)
        .attr("dy", ".35em");

    svg.append("rect")
        .attr("class","overlay")
        .attr("width", width)
        .attr("height", height)
        .on("mouseover", function() { focus.style("display", null);})
        .on("mouseout", function() {focus.style("display", "none");})
        .on("mousemove", mousemove);

    function mousemove() {
        var x0 = x.invert(d3.mouse(this)[0]),
            i = bisectDate(data, x0, 1),
            d0 = data[i - 1],
            d1 = data[i],
            d = x0 - d0.date > d1.date - x0 ? d1:d0; 
            focus.attr("transform", "translate(" + x(d.Year) + "," + y0(d.USA) + ")");
            focus.select("text").text(formatCurrency(d.close));
        }

    });
    </script>

D3折线图工具提示无效

0 个答案: