D3.JS SVG中风适用于子元素

Question

这确实使我的齿轮磨碎了。我正在尝试生成一个条形图，以学习D3.J。当我慢慢地接受事情时，一切都很好。画布的第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")

现在有效，感谢所有输入！