2016-07-26 104 views
0

的属性我这里(的一部分)HTML:访问parent属性设置儿童

<g style="fill: rgb(49, 130, 189);" transform="translate(0,0)" x="200" class="chr"> 
    <circle cy="175.92776604033872" r="3"></circle> 
    <circle cy="292.4129588695106" r="3"></circle> 
</g> 

我想设置圆的CX属性,为此,我需要访问母公司的x属性。

ch.selectAll('circle') 
    .data((d) => { 
     return d.values; 
    }) 
    .enter().append('circle') 
    .attr('r', 3) 
    .attr('cx', (d) => { 
     ... 
    }) 
    .attr('cy', (d) => { 
     return y(d.num); 
    }); 

有谁知道设置cx值时,我怎么能得到x属性的值:下面我的代码给出?提前致谢!!

+3

只是一个提示,与您的问题无关:g元素没有x或y位置。 –

+1

@GerardoFurtado有趣的是,我前几天还在[评论]中将这个引入了用户的注意(http://stackoverflow.com/questions/38544504/reading-csv-data-to-display-in-scatter-plot -with-d3-js#comment64484402_38544504)在他们的另一个问题相同的代码。另一方面,这些属性是没有意义的,并且不会对SVG造成任何伤害,但它可能是某种方式来传达像Mark在他的回答中提到的通知。 – altocumulus

+0

是的,你是绝对正确的,你可以用它来存储信息。但我认为编程人员和程序员应该使用相同的*语言*:当在SVG中看到“x”时,人们会考虑x位置...... –

回答

2

考虑到@ GerardoFurtado的评论,我会认为你是积攒使得x值有其他原因,然后定位...

可以作为访问父(与x属性):

.attr('cx', function(d) { 
    var parentXValue = d3.select(this.parentNode).attr("x"); 
}) 
+2

Upvoted。我没有测试过,但是在那种情况下用'this'做胖箭头是否正常? –

+2

@GerardoFurtado好点!使用胖箭头功能时,'this'不会引用元素。您将需要一个正常的函数表达式。 – altocumulus

+1

@GerardoFurtado和高积云,感谢捕捉!修正了我的答案。 – Mark