d3chartPN_ = function( svgNode /*container for reactive svg paths; in observablehq set it as this ( undefined || svg.node() )*/ ,dataXY /*ex.: [ { xy:aPN.asPointsList(h), nmHtml:'u_C(t)', color:'Blue' //color can be ovr. in ..Attrs as "stroke": "..." and/or defined/ovr in css (stroke .c0 {}) ,pathAttrs:{"stroke-width": 3.5, "stroke": "DarkBlue"} ,symbAttrs:{symb: "circle", //<- for .enter().append() //optional symb. for each datapoint r:5, //translate(x,y) for points is used , {} ... ] //css sel. for path: svg# g.lines g.lineXY.c path //css sel. for symb: svg# g.lines g.lineXY.c g.symbols .symb //attr stroke:color(i) and fill:"none" is set for g.lineXY.c (css can override it) //the last dataXY correspond to top svg line, with class "c0" and nmHtml in legend at left side //( actual dimensions and ranges for xy scales are rememberd in svg.select('g.axes').datum() ) //alternative to xy: [ { yh:aPN.asList(), h:, t_offs:, nmHtml:... // (x_i = i*h + t_offs) */ ,config_ = {} ){ let { /*domain*/ xMinMax_=[0,1], yMinMax_=[-1,1] /*size */,width_, height_/*if undef.: svgMaxWidth, 0.4*width_*/ /*margin*/,top_=25, right_=15, bottom_=25, left_=35 ,xAxisTxt_='t', xAxisTicksFm_="", yAxisTicksFm_="" /*ticksCount*/,xTicksCnt_, yTicksCnt_, /*auto if undef.*/ } = config_; if (!width_) width_ = svgMaxWidth if (!height_) height_ = 0.4*width_ let svg = d3.select(svgNode) if (svg.empty()) { /*AK - usefull for other nodes, not only svg*/ // Create SVG first time only and reuse it later for animations svg = d3.select(DOM.svg(width_, height_)) /**;console.log('\n create svg 1-st time:',svg.node())/**/ } let xScale = d3.scaleLinear().domain(xMinMax_).range([left_, width_ - right_]); let yScale = d3.scaleLinear().domain(yMinMax_).range([height_ - bottom_, top_]); let histDmRange; //reinitilize svg size and axies? if ( !(svg.select('g.axes').empty()) && (histDmRange=svg.select('g.axes').datum()) ) { let actDmRange=xScale.domain().concat(xScale.range(),yScale.domain(),yScale.range()) for (let i = histDmRange.length; i-- ; ) { if (actDmRange[i] !== histDmRange[i]) { //reinitilize svg svg.selectAll("*").remove(); /**;console.log('\n histDmRange',histDmRange,'\n actDmRange',actDmRange)/**/ break; } } } function xyScaled(d) { if (d.xy) return d.xy.map(xy_ => [xScale(xy_[0]), yScale(xy_[1])]) let t_offs = d.t_offs || 0, h = d.h; return d.yh.map((y,i) => [xScale(i*h + t_offs), yScale(y)]) } let line12 = d3.line() //.curve(d3.curveMonotoneX) //if smoothing function color(i) {return dataXY[i % dataXY.length].color /*or undef.*/ }; var lines = svg.select('g.lines'); if (lines.empty()) { // init svg background: svg.attr("width",width_).attr("height",height_).attr('viewBox', `0 0 ${width_} ${height_}`) /**;console.log('\n svg resized',svg.node())/**/ let axes = svg.append("g") .attr("class","axes") .datum(xScale.domain().concat(xScale.range(),yScale.domain(),yScale.range())) //to detect rescale let xAxis = g => g .attr("transform", `translate(0,${height_ - bottom_})`) .call(d3.axisBottom(xScale).tickFormat(d3.format(xAxisTicksFm_)).ticks(xTicksCnt_)) .call(g => g.selectAll(".tick line").clone() .attr("stroke-opacity", 0.2).attr("y1", -(height_ - bottom_ - top_))) let yAxis = g => g .attr("transform", `translate(${left_},0)`) .call(d3.axisLeft(yScale).tickFormat(d3.format(yAxisTicksFm_)).ticks(yTicksCnt_)) .call(g => g.selectAll(".tick line").clone() .attr("stroke-opacity", d => d === 0 ? null : 0.2).attr("x2", width_ - left_ - right_)) axes.append("g").attr("class","xAxis").call(xAxis); axes.append("text") // text label for the x axis .attr("transform",`translate(${width_ - right_ - 3}, ${(height_ - bottom_ - 3)})`) .style("text-anchor", "end") //start | middle | end .text(xAxisTxt_); axes.append("g").attr("class","yAxis").call(yAxis); let legendTxtColor = []; //legend texts and colors for (let i = dataXY.length; i--; ) { legendTxtColor.push({txt:`${(dataXY[i].nmHtml)||('_f_'+i)} `,color:color(i)}); } let legendPN = svg.append('foreignObject') .attr('x', left_) .attr('y', 0) .attr('width', width_ - left_ - right_).attr('height', height_) .append("xhtml:div") .attr("class", "legends") .selectAll(".legend") //empty selection .data(legendTxtColor) .join("span") //or .enter().append("span") .attr("class", (d,i) => `legend c${i}`) //"c0" for last line legend (first from left) .html( d => d.txt ) .style("color", d => d.color ) lines = svg.append('g').attr('class','lines'); }//init svg background lines.selectAll('.lineXY') .data(dataXY) .join( enter => enter.append('g') .attr("stroke", (d,i) => color(i)).attr("fill", "none") .attr('class', (d,i) => `lineXY c${dataXY.length - i -1}`) //"c0" for last line .append('path') .datum( d => xyScaled(d) ) //these scaled data are used also for symbols .attr("d", line12) //add attr and symbols to points .each(function(d,i) { //n - array [ //console.log('\n d',d,'\n i',i,'\n this',this)) for (let a in dataXY[i].pathAttrs) d3.select(this).attr(String(a),dataXY[i].pathAttrs[a]); let symbXY; if ((dataXY[i].symbAttrs) && (symbXY = dataXY[i].symbAttrs.symb)) { //console.log(this.parentNode) // d3.select(this.parentNode) .append('g').attr('class','symbols') .selectAll('.symb') .data(d) //d -> datum() of path .join(symbXY) //or .enter().append(symbXY) //for points of d .attr('transform', d => `translate(${d})`) //inner d .each( function() { //console.log('\n d',d,'\n i',i,'\n n',n,'\n this',this) for (let a in dataXY[i].symbAttrs) { if (a !== 'symb') d3.select(this).attr(String(a),dataXY[i].symbAttrs[a]); } }) .classed('symb',true) //important!: at the end (!) add class - see .selectAll('.symb') } }) //.each n(node)= , update => update //like enter, but replacing "append" to "select" .select('g path') // Update datum and translate symbols for old elements .datum( d => xyScaled(d) ) //scaled data used also for symbol .attr("d", line12) //add attr and symbols to points .each(function(d,i) { //n - array [ //console.log('\n d',d,'\n i',i,'\n this',this)) if ((dataXY[i].symbAttrs) && (dataXY[i].symbAttrs.symb)) { //console.log(this.parentNode) // d3.select(this.parentNode) .select('g.symbols') .selectAll('.symb') .data(d) //d -> datum() of path .attr('transform', d => `translate(${d})`) //inner d } }) //.each n(node)= ) //join() // union of entering and updating selection here... return svg.node(); }