Question

我正在尝试在流图上修复悬停，工具提示问题。我有一个数十年的数据集和移民数据。当我将鼠标悬停在图表上时，它只会显示十年的数据，但整个图表会显示所有数据。

我也在尝试修正轴标签。

enter image description here

例如，俄罗斯的数据应该是最高点：433,427

    <script src="http://d3js.org/d3.v2.js"></script>


<div class="chart">
</div>

<script>

    chart("Data.csv", "blue");

    var datearray = [];
    var colorrange = [];


    function chart(csvpath, color) {

        if (color == "blue") {
            colorrange = ["#045A8D", "#2B8CBE", "#74A9CF", "#A6BDDB", "#D0D1E6", "#F1EEF6"];
        }
        else if (color == "pink") {
            colorrange = ["#980043", "#DD1C77", "#DF65B0", "#C994C7", "#D4B9DA", "#F1EEF6"];
        }
        else if (color == "orange") {
            colorrange = ["#B30000", "#E34A33", "#FC8D59", "#FDBB84", "#FDD49E", "#FEF0D9"];
        }
        strokecolor = colorrange[0];

        var format = d3.time.format("%m/%d/%y");

        var margin = {top: 20, right: 40, bottom: 30, left: 30};
        var width = document.body.clientWidth - margin.left - margin.right;
        var height = 400 - margin.top - margin.bottom;

        var tooltip = d3.select("body")
                .append("div")
                .attr("class", "remove")
                .style("position", "absolute")
                .style("z-index", "20")
                .style("visibility", "hidden")
                .style("top", "30px")
                .style("left", "55px");

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

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

        var z = d3.scale.ordinal()
                .range(colorrange);

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

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

        var yAxisr = d3.svg.axis()
                .scale(y);

        var stack = d3.layout.stack()
                .offset("silhouette")
                .values(function(d) { return d.values; })
                .x(function(d) { return d.date; })
                .y(function(d) { return d.value; });

        var nest = d3.nest()
                .key(function(d) { return d.key; });

        var area = d3.svg.area()
                .interpolate("cardinal")
                .x(function(d) { return x(d.date); })
                .y0(function(d) { return y(d.y0); })
                .y1(function(d) { return y(d.y0 + d.y); });

        var svg = d3.select(".chart").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 + ")");
/* correct this function
        var graph = d3.csv(csvpath, function(data) {
            data.forEach(function(d) {
                d.date = format.parse(d.date);
                d.value = +d.value;
            });*/

        var graph = d3.csv(csvpath, function(raw) {
            var data = [];
            raw.forEach(function (d) {
                data.push({
                    key: d.Country,
                    date : new Date(1980),
                    value : parseInt(d['1980-1989'].replace(',','')) //get rid of the thousand separator
                });
                data.push({
                    key: d.Country,
                    date : new Date(1990),
                    value : parseInt(d['1990-1999'].replace(',',''))
                });
                data.push({
                    key: d.Country,
                    date : new Date(2000),
                    value : parseInt(d['2000-2009'].replace(',','') )
                });
            });


            var layers = stack(nest.entries(data));

            x.domain(d3.extent(data, function(d) { return d.date; }));
            y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);

            svg.selectAll(".layer")
                    .data(layers)
                    .enter().append("path")
                    .attr("class", "layer")
                    .attr("d", function(d) { return area(d.values); })
                    .style("fill", function(d, i) { return z(i); });


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

            svg.append("g")
                    .attr("class", "y axis")
                    .attr("transform", "translate(" + width + ", 0)")
                    .call(yAxis.orient("right"));

            svg.append("g")
                    .attr("class", "y axis")
                    .call(yAxis.orient("left"));

            svg.selectAll(".layer")
                    .attr("opacity", 1)
                    .on("mouseover", function(d, i) {
                        svg.selectAll(".layer").transition()
                                .duration(250)
                                .attr("opacity", function(d, j) {
                                    return j != i ? 0.6 : 1;
                                })})

                    .on("mousemove", function(d, i) {
                        mousex = d3.mouse(this);
                        mousex = mousex[0];
                        var invertedx = x.invert(mousex);
                        invertedx = invertedx.getMonth() + invertedx.getDate();
                        var selected = (d.values);
                        for (var k = 0; k < selected.length; k++) {
                            datearray[k] = selected[k].date
                            datearray[k] = datearray[k].getMonth() + datearray[k].getDate();
                        }

                        mousedate = datearray.indexOf(invertedx);
                        pro = d.values[mousedate].value;

                        d3.select(this)
                                .classed("hover", true)
                                .attr("stroke", strokecolor)
                                .attr("stroke-width", "0.5px"),
                                tooltip.html( "<p>" + d.key + "<br>" + pro + "</p>" ).style("visibility", "visible");

                    })
                    .on("mouseout", function(d, i) {
                        svg.selectAll(".layer")
                                .transition()
                                .duration(250)
                                .attr("opacity", "1");
                        d3.select(this)
                                .classed("hover", false)
                                .attr("stroke-width", "0px"), tooltip.html( "<p>" + d.key + "<br>" + pro + "</p>" ).style("visibility", "hidden");
                    })

            var vertical = d3.select(".chart")
                    .append("div")
                    .attr("class", "remove")
                    .style("position", "absolute")
                    .style("z-index", "19")
                    .style("width", "1px")
                    .style("height", "380px")
                    .style("top", "10px")
                    .style("bottom", "30px")
                    .style("left", "0px")
                    .style("background", "#fff");

            d3.select(".chart")
                    .on("mousemove", function(){
                        mousex = d3.mouse(this);
                        mousex = mousex[0] + 5;
                        vertical.style("left", mousex + "px" )})
                    .on("mouseover", function(){
                        mousex = d3.mouse(this);
                        mousex = mousex[0] + 5;
                        vertical.style("left", mousex + "px")});
        });
    }
</script>

我正在调整此帖子中的代码：http://bl.ocks.org/WillTurman/4631136

我的数据将是每十年，所以1980-1989,1990-1999,2000-2009

    1980-1989 1990-1999 2000-2009

即俄罗斯33,311 433,427 167,152

悬停d3.js Streamgraph

0 个答案: