From 655746424fa90d269ad2172bce8b0dbc8021a6ae Mon Sep 17 00:00:00 2001 From: Dorian Goepp <dorian.goepp@gmail.com> Date: Fri, 5 Apr 2019 10:03:09 +0200 Subject: [PATCH] make intended valence plot dashed (and alter its legend) --- src/InteractionTrace/figureElements.js | 28 +++++++++++++++++--------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/src/InteractionTrace/figureElements.js b/src/InteractionTrace/figureElements.js index c33d5ed..4551d4c 100644 --- a/src/InteractionTrace/figureElements.js +++ b/src/InteractionTrace/figureElements.js @@ -21,7 +21,7 @@ export function Separators(props) { export function Backgrounds(props) { let elements = []; const overflow = props.yLayout.domain.padding/2; - const colours = ["none", "#ebebec"]; // "#f9f9f9", "#f5f5f6" -> background colour, "#edecec" -> latest value + const colours = ["none", "#ebebec"] const colour = d3.scaleOrdinal() .domain([0, colours.length-1]) .range(colours); @@ -199,12 +199,10 @@ export function Plots(props) { cx={props.xScale(point.x)} cy={props.yScale(point.y)} r="4" /> }); - const lineClass = "line " + name; - // The whole curve (line and markers) return ( <g key={"plot" + name}> - <path className={lineClass} d={line(data)} stroke={colour} /> + <path className={"line " + name} d={line(data)} stroke={colour} /> {markers} </g>); }); @@ -221,16 +219,26 @@ export function Legend(props) { const names = Object.keys(props.data); const yScale = index => props.yOffset + index * em * 1.2; - + + const line = d3.line() + .x(d => props.xOffset*d.x) + .y(d => yScale(d.y*2 + 1)) + .curve(d3.curveLinear); // don't apply smoothing to the line + return ( <g transform={"translate(0," + props.yOffset + ")"}> - {names.map((name, index) => ( - <text key={"legend" + name} x={props.xOffset} y={yScale(index)} - textAnchor="end" dominantBaseline="middle" + {names.map((name, index) => { + const data = [{x: 0, y: index}, {x: 1, y: index}]; + return [ + <text key={"legend" + name} x={0} y={yScale(index*2)} + textAnchor="start" dominantBaseline="middle" className="interaction-trace legend" style={{ fill: props.colour(name)}}> {name} - </text> - ))} + </text>, + <path key={"line" + name} className={"line " + name} + d={line(data)} stroke={props.colour(name)} /> + + ]})} </g> ); } \ No newline at end of file -- GitLab