Question

我正在尝试使用类选择器（'curves'）为d3曲线添加边框我已经使用.attr（）方法添加到这些对象中。为什么不为我的曲线添加边框？

在原始代码中，我有几个选择器成功定位了我想要的对象，但由于某些原因，当涉及到这个特定的d3对象时，它对CSS选择器（？）不起作用。我很欣赏这个问题的具体建议，但也有关如何编辑像这些曲线这样的d3对象外观的更一般的建议。

<!DOCTYPE HTML>
<html>

<link href='https://fonts.googleapis.com/css?family=Poller+One' rel='stylesheet' type='text/css'>

<head>
    <title> *** </title>

    <script src="http://d3js.org/d3.v3.min.js"></script> 
    <script src='C:\Users\***\Google Drive\Code\jquery-1.11.1.js'></script>

    <style >

        .a{
            color:yellow;
            background:red;
            font-family: 'Poller One',verdana, arial, sans-serif;
        }
        .curves{
            border-radius: 20px 20px 20px 20px;
            border-style: solid;
            border-color: black;
            border-width: 20px;
            background-color: blue;
        }


    </style>

</head>

<body class="a">

    <div>
        <p align="center">Lorem Ipsum</p>

    </div>

    <dl>
        <dt>Defintion list item</dt>
        <dd>This is the definition</dd>

    </dl>

    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
    </ol>
</body>

    <script>
        var data = [30,50,80,120,150,60,15];
        var r = 300;

        var color = d3.scale.ordinal()
            .range(['green','red','blue','orange','yellow','purple','magenta']);


        var canvas = d3.select("body").append("svg")
            .attr("width", 1500)
            .attr("height", 1500);

        var group = canvas.append("g")
            .attr('transform', 'translate(300,300)');

        var arc = d3.svg.arc()
            .innerRadius(125)
            .outerRadius(r);

        var pie = d3.layout.pie() //go inspect the objects in the browser
            .value(function (d) { return d; });

        var arcs = group.selectAll(".arc") // select everything with the arc class
            .data(pie(data))
            .enter()
            .append("g")
            .attr('class', 'arc');

        arcs.append("path")
            .attr('d', arc)
            .attr('fill', function (d) { return color(d.data); })
            .attr('class', 'curves');


        arcs.append("text") 
            .attr("transform", function (d) { return "translate(" + arc.centroid(d) + ")"; })
            .attr('text-anchor', 'middle')
            .attr('font-size', '2em')
            .text(function (d) { return d.data; });

        });
    </script>
</body>

</html>

Answer 1

curve的CSS定义使用的属性可用于常规HTML元素，例如<div>。像<path>这样的SVG元素使用fill和stroke等属性来完成您要执行的操作。这是一篇很好的文章，描述了如何应用填充和stoke属性：

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes

为d3曲线添加边框

1 个答案: