将事件侦听器附加到react中的svg元素

时间:2017-02-15 04:18:43

标签: reactjs d3.js svg

我对React很新。 我在我的反应网页应用程序中有d3地图。我需要在地图上附加一个点击事件。有人可以告诉我如何点击这张地图吗?

const County = ({geoPath,feature}) => (
    //<path d={geoPath(feature)} style={{fill: color}} title={feature.id} />

    <path d={geoPath(feature)} style={{fill: color(Math.random()*5)}} title={feature.id} />
);

----------  
render(){
      if(!this.props.usTopoJson){
          return null;
      }else{
          let color = 'rgb(42,73,120)';
          //let color = 'orange';
          const us = this.props.usTopoJson,
                statesMesh=topojson.mesh(us,us.objects.countries.geometries,(a,b) => a !==b),
                countries = topojson.feature(us,us.objects.countries).features;
            return(
                //<g>
               <g ref={(g) => { this.myG = g; }}>
                {countries.map((feature) => 
                        <County geoPath={this.geoPath} 
                                feature={feature}
                                key={feature.id}
                                quantize={this.quantize} />)}
                 <path d={this.geoPath(statesMesh)} style={{fill:'color',stroke:'#aaa',
                                                            strokeLinejoin:'round'}}/>

                </g>
            );
      }

  }

1 个答案:

答案 0 :(得分:0)

<County geoPath={this.geoPath} 
           onClick={someHandleClickFunc}
           feature={feature}
           key={feature.id}
           quantize={this.quantize} />