Mgiyuk

D3- How do I draw dots on a multi line graph? (Iterate through array) I have a multi line chart on which I would like to draw dots ( eventually to add my tooltip to.) I just can't seem to iterate through the data correctly and draw them all. My data is an array of arrays, each sub array being it's own line on which i'd like to draw the dots. x(inspected_at), y(flow_data) The full code is here, around line 388: https://codepen.io/lahesty/pen/aKQjVK?editors=0011 var dots = svg.selectAll('.dots').data(data).enter().append("g").attr("class", "dot"); dots.selectAll('.dot') .data(data) .enter() .append('circle') .attr("r", 2.5) .attr("cx", function(d) { return x(d.inspected_at); }) .attr("cy", function(d) { return y(d.flow_data); }) .style("fill", "blue").style("opacity", ".5") I assume it's something similar because w...

Cross-Browser SVG Text Baseline Alignment This is how SVG text is rendered in browser for Chrome with the following (note in react so camel case attributes) <text x="50%" y="50%" className='middleText' textAnchor="middle" alignmentBaseline="middle" >{style.displayVal.toFixed(precision)}</text> This is how the text renders in Firefox: What is the best way you've found to get consistent baseline crossbrowser? 1 Answer 1 replace alignmentBaseline with dominantBaseline. Firefox does not currently support the former property but does support the latter. By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your co...