d3.js 应用于子元素的 svg 描边

Question

这真让我磨磨蹭蹭。我正在尝试生成一个条形图来学习 d3.js。一切顺利，因为我慢慢来。 canvas 的第 1 天，条形图的第 2 天，scaling/margins 的第 3 天等等。直到今天，我想添加一个轴。为了使一切更容易可视化，我删除了主要 canvas 的笔划（在添加轴之前显示得非常好）。

添加轴后，笔划被添加到条上，而不是包含所有内容的主 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 描边

d3.js svg stroke applying to child element

svg

stroke

d3.js