my data line supposed put behind circles refuses stubbornly so. first thought had order of appending but, apparently, doesn't. , i've learned others had similar issue too. i'd dots this picture.
i've noticed the last circle behaves expected. gets behind line if append set of circles first , gets in front in opposite case. other data points don't obey same logic.
generally, i'll creating charts more single data point, it's going problem...
what missing in my chart?
gees.append("path") .attr("d", d3.svg.line().x(posx).y(posy)(data)); gees.append("circle") .attr({ cx: posx, cy: posy, r: dotsize }); as secondary question, i'm starting d3 now, i'll gladly accept comments on approach of data binding , structuring element creation , manipulation, should viewer recognize code smell.
the reason when do:
// set of g elements in individual data points var gees = graph1.selectall("g").data(data).enter().append("g"); // path appended before circles gees.append("path") .attr("d", d3.svg.line().x(posx).y(posy)(data)) .attr("class","datapath"); you making many paths data.
example: if data has length 10 drawing 10 paths!. every time new path drawn on other. correct when making circles, array of length 10 10 circles.
so correct way this:
//this make single path graph1.append("path") .attr("d", d3.svg.line().x(posx).y(posy)(data)) .attr("class","datapath"); working code here
edit
if see dom
<g> <path d="m10,395l30,346.23626273003947l50,348.88315845093945l70,325.8408757172729l90,361.79282401218563l110,337.23829975521113l130,271.36254043537434l150,326.84355151115744l170,296.18083274584734l190,239.00309425733596l210,246.4312641551351l229.99999999999997,261.73836974728044l250,222.77033711908345l270,175.77553751327844l290,202.07665355388494l310,162.47810406521793l330,161.2957419597571l350,131.1359499531521l370,129.23952903887664l390,139.51540231604645l410,144.10064067915437l430,126.07475247355066l449.99999999999994,114.16957928889813l470.00000000000006,47.3902223639799l490,67.03516083686108l510,10.340972431627879l530,5l550,27.22071082134911l570,52.42233413128351l590,17.020429086361613" class="datapath"></path> <circle cx="10" cy="395" r="5" class="datapoint"></circle> <line x1="10" y1="246.0618379173906" x2="10" y2="241.0618379173906" stroke="lightgrey" stroke-width="1"></line> <line x1="0" y1="246.0618379173906" x2="600" y2="246.0618379173906" class="axis"></line> </g> then next dom new circle old path:
<g> <path d="m10,395l30,346.23626273003947l50,348.88315845093945l70,325.8408757172729l90,361.79282401218563l110,337.23829975521113l130,271.36254043537434l150,326.84355151115744l170,296.18083274584734l190,239.00309425733596l210,246.4312641551351l229.99999999999997,261.73836974728044l250,222.77033711908345l270,175.77553751327844l290,202.07665355388494l310,162.47810406521793l330,161.2957419597571l350,131.1359499531521l370,129.23952903887664l390,139.51540231604645l410,144.10064067915437l430,126.07475247355066l449.99999999999994,114.16957928889813l470.00000000000006,47.3902223639799l490,67.03516083686108l510,10.340972431627879l530,5l550,27.22071082134911l570,52.42233413128351l590,17.020429086361613" class="datapath"></path> <circle cx="30" cy="346.23626273003947" r="5" class="datapoint"></circle> <line x1="30" y1="246.0618379173906" x2="30" y2="241.0618379173906" stroke="lightgrey" stroke-width="1"></line> <line x1="0" y1="246.0618379173906" x2="600" y2="246.0618379173906" class="axis"></line> </g> so making new groups , in circle , path dom getting added.
i think if inspect dom understand problem better.
in fiddle line behind circles last 1 appears in front reason line till center of last circle.
edit again
to make circle above line this
//make path first graph1.append("path") .attr("d", d3.svg.line().x(posx).y(posy)(data)) .attr("class","datapath"); //make group // set of g elements in individual data points var gees = graph1.selectall("g").data(data).enter().append("g"); //add circle group // path appended before circles // circles appended after path gees.append("circle") .attr({ cx: posx, cy: posy, r: dotsize }) .attr("class", "datapoint"); working code here
hope helps!
Comments
Post a Comment