有没有办法从d3pie上的弧线中删除笔划或边框

时间:2014-12-21 03:49:13

标签: javascript d3.js

我一直试图从d3pie中删除笔画并且没有运气,没有任何教程,甚至在生成器中也没有选择删除笔划,只是改变颜色,我想知道如果它甚至可以摆脱中风。这是我到目前为止的圆环图的代码。任何帮助将不胜感激。感谢

var pie = new d3pie("pieChart", {
    "header": {
        "title": {
            "fontSize": 24,
            "font": "open sans"
        },
        "subtitle": {
            "color": "#999999",
            "fontSize": 12,
            "font": "open sans"
        },
        "location": "top-left",
        "titleSubtitlePadding": 9
    },
    "footer": {
        "color": "#999999",
        "fontSize": 10,
        "font": "open sans",
        "location": "bottom-left"
    },
    "size": {
        "canvasHeight": 400,
        "canvasWidth": 400,
        "pieInnerRadius": "68%",
        "pieOuterRadius": "100%"
    },
    "data": {
        "sortOrder": "label-desc",
        "content": [
            {
                "label": "Natty",
                "value": 1,
                "color": "#fb0000"
            },
            {
                "label": "Nah",
                "value": 1,
                "color": "#000000"
            }
        ]
    },
    "labels": {
        "outer": {
            "format": "none",
            "pieDistance": 32
        },
        "inner": {
            "format": "none",
            "hideWhenLessThanPercentage": 3
        }
    },
    "tooltips": {
        "enabled": true,
        "type": "placeholder",
        "string": "{label}: {value}, {percentage}%",
        "styles": {
            "padding": 10
        }
    },
    "effects": {
        "pullOutSegmentOnClick": {
            "effect": "linear",
            "speed": 400,
            "size": 8
        }
    }
});
<div id="pieChart"></div>

<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js"></script>
<script src="d3pie.min.js"></script>

结果: Screenshot of donut chart used as a progress indicator

2 个答案:

答案 0 :(得分:1)

svg.selectAll('rect')
        .on("mouseover", function(d) {
          var e = d3.select(this)
          e.attr('stroke', '#2378ae')
          e.attr('stroke-width', '3');
      })

        .on("mouseout", function(d){
           d3.selectAll('rect').attr("stroke", "none"); 
});

这会打开你的矩形吧我不知道那个馅饼,希望这会给你一个想法,d3有用css使用的功能,

答案 1 :(得分:0)

您应该可以通过CSS删除笔划。这就是为什么没有直接选择它的原因。只需在浏览器中打开开发工具,选择arc元素以找出相应的类名,然后设置stroke: none(或任何你想要的)。