Question

在D3 v4中，我发现指定stroke-dasharray作为属性按预期工作。另一方面，通过样式指定它不会。请参阅本说明末尾的代码清单。

根据Mozilla基金会（https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes）：

＆＃34;使用CSS

除了在对象上设置属性外，您还可以使用CSS来设置填充和描边的样式。并非所有属性都可以通过CSS设置。处理绘画和填充的属性通常是可用的，所以填充，描边，描边-dasharray等都可以这样设置......＆＃34;

所以有三种可能性之一：

1）我没有在下面提供的示例代码中正确实现样式。

2）D3没有正确实现风格。

3）Mozilla基金会错误地认为能够通过CSS设置stroke-dasharray。

这是什么？

代码：

<!DOCTYPE html>
<html>
    <head>
        <script src='https://d3js.org/d3.v4.min.js'></script>
        <style>
            .dashed {
                stroke-dasharray: '5,3';
            }
        </style>
    </head>
    <body>
        <svg height=200 width=500></svg>
    </body>
    <script>
        var svg = d3.select('svg');
        svg.append('line')
            .attr('x1', 0)
            .attr('x2', 500)
            .attr('y1', 25)
            .attr('y2', 25)
            .style('stroke', 'blue')
            .style('stroke-width', '2px')
            .style('stroke-dasharray', '5,3');
        svg.append('line')
            .attr('x1', 0)
            .attr('x2', 500)
            .attr('y1', 75)
            .attr('y2', 75)
            .style('stroke', 'blue')
            .style('stroke-width', '2px')
            .attr('class', 'dashed');
    </script>
</html>

Answer 1

您在CSS中使用了一个字符串，这是一个无效的属性值。而不是那样，它应该是一个数字：

.dashed {
    stroke-dasharray: 5,3;
}

检查：

＆＃13;

<html>
    <head>
        <script src='https://d3js.org/d3.v4.min.js'></script>
        <style>
            .dashed {
                stroke-dasharray: 5,3;
            }
        </style>
    </head>
    <body>
        <svg height=200 width=500></svg>
    </body>
    <script>
        var svg = d3.select('svg');
        svg.append('line')
            .attr('x1', 0)
            .attr('x2', 500)
            .attr('y1', 25)
            .attr('y2', 25)
            .style('stroke', 'blue')
            .style('stroke-width', '2px')
            .style('stroke-dasharray', '5,3');
        svg.append('line')
            .attr('x1', 0)
            .attr('x2', 500)
            .attr('y1', 75)
            .attr('y2', 75)
            .style('stroke', 'blue')
            .style('stroke-width', '2px')
            .attr('class', 'dashed');
    </script>
</html>

＆＃13;

因此，正确的答案是数字1：

1）我没有在下面提供的示例代码中正确实现样式。

D3通过CSS设置stroke-dasharray

1 个答案: