Question

我有一个rect元素，我想在右侧设置一个短划线，目前我已经添加了这样的css行：

.c3-event-rect {
  stroke: #ccc;
  stroke-dasharray: 1,3;
  stroke-width: 1px;
}

与javascritp类似

d3.selectAll('.c3-event-rect')
          .style('stroke-dasharray', ('2,3'))
          .style('stroke', '#dedede')

但虚线覆盖了所有方面我试过这篇文章here，但我没有得到我想要的结果

Answer 1

要达到预期效果，请使用矩形右侧的虚线

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

//Draw the Rectangle
var rectangle = svgContainer.append("rect")
  .attr("x", 10)
  .attr("y", 10)
  .attr("width", 50)
  .attr("height", 100);

svgContainer.append("line") 
  .style("stroke", "black") 
  .attr("x1", 60) 
  .attr("y1", 10) 
  .attr("x2", 60) 
  .attr("y2", 110)
  .style("stroke-dasharray", ("2, 3"))

http://codepen.io/nagasai/pen/zBREmV

Answer 2

你只需要将形成空间的50分解成更小的破折号。也许是这样的事情。

＆＃13;

rect { fill: none; stroke: black; }
.right { stroke-dasharray: 50,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,100 }

＆＃13;

<svg height="300">
<rect x="0.5" y="0.5" width="50" height="50" class="right"/>
</svg>

＆＃13;

或者如果你只想要一边虚线，在开头加一个零，这样就可以交换实线和虚线区域。

＆＃13;

rect { fill: none; stroke: black; }
.right { stroke-dasharray: 0,50,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,100 }

＆＃13;

<svg height="300">
<rect x="0.5" y="0.5" width="50" height="50" class="right"/>
</svg>

＆＃13;

或者将形状绘制为2条路径，一条是实心的3面形状，另一条是垂直的虚线。

c3js d3 dash-stroke只有rect元素的一面

2 个答案: