d3/d3-shape

need help achieving this shape

zilahir opened this issue · 1 comments

Hey!

It's a shame, but I cant figure this out myself, so came here for help.

I want to achieve a shape like this:

image

I have something similar already done, using .curve() but it's not quite still:

const width = 1600
const height = 64
cons tabWidth = 160
const tab = shape.line().x(d => d.x).y(d => d.y).curve(shape.curveBasis)([
			{ x: width, y: 0 },
			{ x: width + 5, y: 0 },
			{ x: width + 10, y: 10 },
			{ x: width + 15, y: height },
			{ x: width + tabWidth - 15, y: height },
			{ x: width + tabWidth - 10, y: 10 },
			{ x: width + tabWidth - 5, y: 0 },
			{ x: width + tabWidth, y: 0 },
		]);

image

Can you help me achieve the desired shape?

Thank you!

You can use the rx attribute on a rect element.

This is not the right forum for asking for help - please try asking in the #help channel of https://d3-slackin.herokuapp.com/