D3通过CSS设置stroke-dasharray

本文介绍了D3通过CSS设置stroke-dasharray的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在D3 v4中，我发现将stroke-dasharray指定为属性可以按预期工作.另一方面，没有通过样式指定它.请参阅此注释末尾的代码清单.

In D3 v4 I find that specifying stroke-dasharray as an attribute works as expected. On the other hand, specifying it through a style does not. Please see the code listing at the end of this note.

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

According to the Mozilla Foundation (https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes):

使用CSS

除了在对象上设置属性外，还可以使用CSS设置填充和描边的样式.并非所有属性都可以通过CSS设置.通常可以使用涉及绘画和填充的属性，因此可以通过这种方式设置fill，stroke，stroke-dasharray等..."

In addition to setting attributes on objects, you can also use CSS to style fills and strokes. Not all attributes can be set via CSS. Attributes that deal with painting and filling are usually available, so fill, stroke, stroke-dasharray, etc... can all be set this way..."

因此，存在以下三种可能性之一:

So there is one of three possibilities:

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

1) I am not implementing the style properly in the sample code provided below.

2)D3没有正确实现样式.

2) D3 is not implementing the style properly.

3)Mozilla Foundation在能够通过CSS设置stroke-dasharray方面是错误的.

3) The Mozilla Foundation is wrong about being able to set stroke-dasharray through CSS.

是哪个?

代码:

<!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>

推荐答案

您在CSS中使用的字符串是无效的属性值.取而代之的是，它应该是一个数字:

You are using a string in the CSS, which is an invalid property value. Instead of that, it should be a number:

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

检查:

<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>

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

Thus, the correct answer is number 1:

这篇关于D3通过CSS设置stroke-dasharray的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！