d3v4 为什么我的线元素没有出现？答案

【问题标题】：d3v4 why are my line elements not appearing?d3v4 为什么我的线元素没有出现？
【发布时间】：2019-11-26 00:22:07
【问题描述】：

我正在在图表上制作一组简单的箱线图，但由于某种原因，线条元素没有显示出来代码是：

    var margin = {
        top: 10,
        right: 30,
        bottom: 30,
        left: 40
    },
    width = 900 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;
var svgBox = d3.select("#my_dataviz")
    .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 + ")");


var yScale = d3.scaleLinear()
    .range([height, 0]);


var xScale = d3.scaleBand()
    .rangeRound([0, width])
    .paddingInner(0.05)
    .align(0.1);


var center = 200
var width = 100


d3.csv("boxPlotData.csv", function(dataset) {
    var max = d3.max(dataset, function(d) {
        return +d.max;
    });
    yScale.domain([0, max])
    xScale.domain(dataset.map(function(d) {
        return d.borough;
    }));
    svgBox.append("g").call(d3.axisLeft(yScale));
    svgBox.append("g").attr("transform", "translate(0," + height + ")").call(d3.axisBottom(xScale));

    svgBox.selectAll("line").data(dataset).enter()
        .append("line")
        .attr("x1", d => xScale(d.borough) + width / 3.5)
        .attr("x2", d => xScale(d.borough) + width / 3.5)
        .attr("y1", d => yScale(+d.min))
        .attr("y2", d => yScale(+d.max))
        .attr("stroke", "black");


    svgBox.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x", d => xScale(d.borough) + width / 3.5)
        .attr("y", d => yScale(+d.q3))
        .attr("height", d => (yScale(+d.q1) - yScale(+d.q3)))
        .attr("width", width)
        .attr("stroke", "black")
        .style("fill", "#69b3a2");
});

我的数据格式为

Data CSV

代码按预期输入“rect”元素，但行组件未显示在 html 中的任何位置？

【问题讨论】：

我确实有 selectAll，但在询问问题时忘记将其放回代码中（正在擦除和修改它以尝试使其正常工作）。与 selectAll 的结果相同

标签： javascript d3.js graph data-visualization

【解决方案1】：

问题是您不能只使用svgBox.selectAll("line")，因为它会选择轴刻度线以及轴线。相反，我建议使用attr("class", "line") 在您的行中添加一个类，并使用svgBox.selectAll(".line") 专门选择要附加的行。

所以 append sn-p 应该是：

  svgBox.selectAll(".line")
    .data(dataset)
    .enter()
    .append("line")
    .attr("class", "line")
    .attr("x1", d => xScale(d.borough) + width / 3.5)
    .attr("x2", d => xScale(d.borough) + width / 3.5)
    .attr("y1", d => yScale(+d.min))
    .attr("y2", d => yScale(+d.max))
    .attr("stroke", "black");

这里是工作的 sn-p 块：https://bl.ocks.org/akulmehta/4b29fb357ea7f02a1b47b611e03a5468/

【讨论】：