javascript - c3js d3 dash-stroke 仅在 rect 元素的一侧

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