Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
8 years ago
Solved

Datacolor changing only after reloading visual

I have created a pie chart and added Data Color property to it. But if i change the color of a data point,the change in color can be seen only after I reload the visual. Why is it not instantaneous...
Need Help
  • v-chuncz-msft's avatar
    v-chuncz-msft
    8 years ago

    Anonymous,

     

    Change it as follows.

    			let arcs = this.pieChartContainer.selectAll('.arc')
							.data(this.pie(this.datapoints))
							;
			
			arcs.enter()
				.append('path')
				.attr('class', 'arc')
				;
v-chuncz-msft's avatar
v-chuncz-msft
Community Support
8 years ago

Anonymous,

 

Inspect the generated HTML in Web Console and change the code as Sample Bar Chart Repo does.

  • Anonymous's avatar
    Anonymous
    Not applicable
    8 years ago
    let radius=Math.min(width,height)/2;
 let arc=this.arc=d3.svg.arc()
            .innerRadius(0)
            .outerRadius(radius);
 console.log(radius);

    v-chuncz-msft,Actually the radius value is changing if I resize the visual. But the  d3.svg.arc retains the old value until the visual is reloaded.

    • v-chuncz-msft's avatar
      v-chuncz-msft
      Community Support
      8 years ago

      Anonymous,

       

      See the code snippet below.

      			let pies = this.pieChartContainer.selectAll('.arc')
							.data(this.pie(viewModel.datapoints));
							
			pies.enter()
				.append('path')
				.classed('arc', true);
			
			pies.attr('d', this.arc)
				.attr('fill', fill);
      • Anonymous's avatar
        Anonymous
        Not applicable
        8 years ago
                      this.arc = d3.svg.arc()
                         .innerRadius(0)
                         .outerRadius(radius);
            console.log(radius);
            this.pie = d3.layout.pie<Data>().value((d: Data):number => d.quantity).sort(null);
            let fill = ((d):string=> d.data.color);
           // let tf   =  (d: Data) => `translate(${this.arc.centroid(d)})`;
            //let text = d => d.data.category;            
             let arcs=this.pieChartContainer.selectAll('.arc')
                    .data(this.pie(this.datapoints))
                    .enter()
                    .append('path')
                    .attr('class', 'arc')                   
                    ;
    
                    arcs
                    .attr('d', this.arc)
                    .attr('fill',fill)
                    .attr('fill-opacity',1)
                    .attr("stroke-width","0.8")
                    ;

        This is my current code. Still not working. The radius also changes only after visual reload.