我一直试图从一个d3pie删除笔划,并没有运气,没有任何教程,甚至在生成器中也没有一个选项来删除笔划,只是改变它的颜色,我想知道它是否甚至可能摆脱笔划。这是代码,我到目前为止的甜甜圈图表。任何帮助将不胜感激。谢谢第一个结果:
o8x7eapl1#
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使用,
jq6vz3qz2#
你应该可以通过CSS删除stroke。这就是为什么没有直接的选项。只要在浏览器中打开dev工具,选择arc元素来找出合适的类名,然后设置stroke: none(或者任何你想要的)。
stroke: none
f0brbegy3#
这完全可以在CSS中完成。因为stroke可以用很多方式定义,并不是所有的方式都可以用stroke:none来控制,你可以使用:stroke-opacity: 0,这将使笔划不可见。
stroke
stroke:none
stroke-opacity: 0
#hover-box:hover { stroke-opacity: 0; }
从MDN Web Docs - stroke-opacity开始...stroke-opacity属性是定义应用于形状的笔画的绘制服务器(颜色、渐变、图案等)的不透明度的呈现属性。注意:stroke-opacity作为一个表示属性,可以用作CSS属性。
正常描边...
<svg height="80" width="300"> <g fill="none"> <path stroke="red" d="M5 20 l215 0" /> <path stroke="black" d="M5 40 l215 0" /> <path stroke="blue" d="M5 60 l215 0" /> </g> Sorry, your browser does not support inline SVG. </svg>
和普通笔画完全一样的代码,但是有stroke-opacity:0;...
stroke-opacity:0;
<svg height="80" width="300" style="stroke-opacity:0;"> <g fill="none"> <path stroke="red" d="M5 20 l215 0" /> <path stroke="black" d="M5 40 l215 0" /> <path stroke="blue" d="M5 60 l215 0" /> </g> Sorry, your browser does not support inline SVG. </svg>
u4dcyp6a4#
svg:focus { outline:none; } path:focus { outline:none; }
4条答案
按热度按时间o8x7eapl1#
这将切换你矩形栏,我不知道在饼,希望这将给予你的想法,d3有功能玩css使用,
jq6vz3qz2#
你应该可以通过CSS删除stroke。这就是为什么没有直接的选项。只要在浏览器中打开dev工具,选择arc元素来找出合适的类名,然后设置
stroke: none
(或者任何你想要的)。f0brbegy3#
100%纯CSS解决方案
这完全可以在CSS中完成。因为
stroke
可以用很多方式定义,并不是所有的方式都可以用stroke:none
来控制,你可以使用:stroke-opacity: 0
,这将使笔划不可见。来源
从MDN Web Docs - stroke-opacity开始...
stroke-opacity属性是定义应用于形状的笔画的绘制服务器(颜色、渐变、图案等)的不透明度的呈现属性。
注意:stroke-opacity作为一个表示属性,可以用作CSS属性。
工作演示
正常描边...
和普通笔画完全一样的代码,但是有
stroke-opacity:0;
...u4dcyp6a4#