c3js d3 dash-stroke only one side of rect element

Question

i have a rect element and i want to set up a dash stroke only in the right side, currently i've added the lines with css like this:

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

with javascritp is something like

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

but the dashed is covered all the sides i've tried this post here but i don't get the result that i want

Include what you tried based on the other post and describe why that isn't what you want. — Robert Longson, Jul 18 '16 at 21:43
basically i want to set the same typo of lines that the post, but the post the lines are solid, and i want a dashed line in one side only — Juan Mejia, Jul 18 '16 at 22:06

score 1 · Answer 1 · answered Jul 19 '16 at 03:29

To achieve your expected result, use dashed line to the right of rectangle

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

Robert Longson · Accepted Answer · 2016-07-19T06:59:24.210

You just need to break up the 50 which forms the space into smaller dashes. Something like this perhaps.

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 }

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

or if you only want 1 side dashed add a zero at the beginning so the solid and dashed areas swap.

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 }

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

Alternatively draw the shape as 2 paths, one which is the solid 3 sided shape and the other which is a vertical dashed line.

c3js d3 dash-stroke only one side of rect element

2 Answers2