Question

这真的磨练了我的齿轮。我正在尝试生成一个条形图来学习d3.js.一切顺利，因为我慢慢地把事情搞定了。第1天为画布，第2天为条形，第3天为缩放/边距等。直到今天，我想添加轴。为了使所有内容更容易可视化，我删除了主画布的笔触（在添加轴之前显示完全正常）。

添加轴后，笔划将添加到条形图中，而不是包含所有内容的主svg。我看了100次我的代码，我确定没有错，但结果并不是我所期待的。有线索吗？

没有css链接到图表的任何元素，一切都是由d3.js
在控制台中查看，笔划显示为主svg（容器）的属性，但似乎属性被忽略

https://jsfiddle.net/vtw6pfwq/（我必须更改数据集，但它有效）

    <div class="datavis">
    </div>
    <script>
        d3.csv("data/demo.csv", function(data) {
            console.log(data);

            var margin = {top: 20, right: 20, bottom: 20, left: 60};
            var width = 750 - margin.left - margin.right;
            var height = 250 - margin.top - margin.bottom;
            var extent = d3.extent(data, function(d) {return +d.arg3;});
            var scale = d3.scaleLog().domain(extent).range([height, 0]);
            var yAxis = d3.axisRight(scale).ticks(5, "d");

            d3.select(".datavis")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .style("stroke", "#BDBDBD") // this is the non-working line, as you can tell, the stroke is applied to the green bars, not the main svg. Why??
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

            d3.select("svg")
            .append("g")
            .attr("id", "yAxisG")
            .attr("transform", "translate(0," + margin.top + ")")
            .call(yAxis)

            d3.select("g").selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            .attr("x", function(d,i) {return i * width / data.length;})
            .attr("y", function(d) {return height-scale(d.arg3);})
            .attr("width", function(d) {return width / data.length - 1;})
            .attr("height", function(d) {return scale(d.arg3);})
            .style("fill", "#4CAF50")
            .style("opacity", function(d) {return d.arg2;});
        });
    </script>

Answer 1

感谢此处的评论（同时被删除），我意识到我的错误是多么愚蠢。 SVG元素没有笔划，它必须是CSS边框。

.style("border", "1px solid #BDBDBD")

现在可以使用，感谢所有输入！

适用于子元素的d3.js svg stroke

1 个答案: