Question

我是D3的新手并且正在开展一个项目，其中包含我大学的学生数据。我正在学习一些教程来创建一个多线图，但我无法弄清楚我的SVG发生了什么。我设置了我的高度和宽度，但它在屏幕上显示有线。这是我的代码：

<body>
<p>Students' Major by Gender.</p>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
    var div = d3.select("body").append("div")
        .attr("class", "tooltip")
        .style("opacity", 0);

    var MARGINS = {top: 50, right: 20, bottom: 50, left: 50},
        WIDTH = 1500 - MARGINS.left - MARGINS.right,
        HEIGHT = 800 - MARGINS.top - MARGINS.bottom;

    var xScale = d3.scale.linear().range([0, WIDTH]),

        yScale = d3.scale.linear().range([HEIGHT, 0]),

        xAxis = d3.svg.axis()
            .scale(xScale)
            .orient("bottom").ticks(5),

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

    var svg = d3.select("body")
        .append("svg")
            .attr("WIDTH", WIDTH + MARGINS.left + MARGINS.right)
            .attr("HEIGHT", HEIGHT + MARGINS.top + MARGINS.bottom)
        .append("g")
            .attr("transform", "translate(" + MARGINS.left + "," + MARGINS.top + ")");

    var colorScale = ["#FF0000", "#0000FF"];

    var color = d3.scale.ordinal().range(colorScale);

    d3.json("data/majors/major_ARCH.json", function(data) {
        data.forEach(function(d) {
            d.Year = +d.Year;
            d.Gndr = d.Gndr;
            d.Count = +d.Count;
        });

        function sortByDateAscending(a, b) {
            //Years will be cast to numbers automagically:
            return a.Year - b.Year;
        }

        data = data.sort(sortByDateAscending);
        console.log(data);

        var dataNest = d3.nest()
            .key(function(d) { return d.Gndr; })
            .entries(data);

        var lSpace = WIDTH/dataNest.length;

        var GenderLine = d3.svg.line()
            .x(function(d) {
                return xScale(d.Year);
            })
            .y(function(d) {
                return yScale(d.Count);
            })

        xScale.domain([d3.min(data, function(d) {
                return d.Year;
            }), d3.max(data, function(d) {
                return d.Year;
            })]);

        yScale.domain([d3.min(data, function(d) {
                return d.Count;
            }), d3.max(data, function(d) {
                return d.Count;
            })]);

        dataNest.forEach(function(d, i) {
            svg.append("path")
                .attr('d', GenderLine(d.values, xScale, yScale))
                .attr('stroke', function() {
                    return d.color = color(d.key);
                })
                .attr('stroke-width', 2)
                .attr('id', 'line_' + d.key)
                .attr('fill', 'none');

            svg.append("text")
                .attr("x", (lSpace / 2) + i * lSpace)
                .attr("y", HEIGHT)
                .style("fill", "black")
                .attr("class", "legend")
                .on('click', function() {
                    var active = d.active ? false : true;
                    var opacity = active ? 0 : 1;

                    d3.select("#line_" + d.key).style("opacity", opacity);

                    d.active = active;
                })
                .attr("stroke", function() {
                    return d.color = color(d.key);
                })
                .text(d.key);
        })

        svg.selectAll("dot")
            .data(data)
            .enter()
            .append("circle")
            .attr("r", 5)
            .attr("cx", function(d) { return xScale(d.Year); })
            .attr("cy", function(d) { return yScale(d.Count); })
            .on("mouseover", function(d) {
                div.transition()
                    .duration(200)
                    .style("opacity", .9)
                div.html(d.Year + "<br/>" +d.Count)
                    .style("left", (d3.event.pageX) + "px")
                    .style("top", (d3.event.pageY - 28) + "px");
            })
            .on("mouseout", function(d) {
                div.transition()
                    .duration(500)
                    .style("opacity", 0);
            });

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

        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis);
    });
</script>

CSS：

.axis path {
    fill: none;
    stroke: #777;
    shape-rendering: crispEdges;
}
.axis text {
    font-family: Lato;
    font-size: 13px;
}

/* Legend */
.legend {
    font-size: 14px;
    font-weight: bold;
}

/*Tooltip*/
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;           
}

我尝试关注帖子（Resize svg when window is resized in d3.js）来创建响应式svg，但它无效...

我用来创建图表的两个教程是： http://bl.ocks.org/d3noob/a22c42db65eb00d4e369 https://code.tutsplus.com/tutorials/building-a-multi-line-chart-using-d3js-part-2--cms-22973

我想让我的svg响应，并知道我的代码的问题。谢谢！

D3.js SVG有线尺寸

0 个答案: