Forum Discussion
Attributes are not getting applied after enter() using D3
I am following the video tutorial: https://channel9.msdn.com/Blogs/Azure/Building-Power-BI-custom-visuals-that-meet-your-app-needs
The update method is below:
public update(options: VisualUpdateOptions) {
console.log('update called');
let width = options.viewport.width;
let height = options.viewport.height;
// other code
let viewModel: ViewModel = {
dataPoints: testData,
dataMax: d3.max(testData.map((dataPoint) => dataPoint.value))
};
// other code
let bars = this.barContainer.selectAll('.bar').data(viewModel.dataPoints);
console.log('xScale bandwidth: ', xScale.bandwidth());
bars.enter().append('rect').classed('bar', true);
bars
.attr('width', xScale.bandwidth())
.attr('height', d => height - yScale(d.value))
.attr('y', d => yScale(d.value))
.attr('x', d => xScale(d.category));
bars.exit().remove();
}The above video tutorial is for creating a bar chart. When I run the code I do not see anything. But when I resize the visual the bar chart is showing up.
I noticed that, the .attr() function is not working in the initial load.
After that I changed the code to:
bars.enter().append('rect').classed('bar', true)
.attr('width', xScale.bandwidth())
.attr('height', d => height - yScale(d.value))
.attr('y', d => yScale(d.value))
.attr('x', d => xScale(d.category));
bars
.attr('width', xScale.bandwidth())
.attr('height', d => height - yScale(d.value))
.attr('y', d => yScale(d.value))
.attr('x', d => xScale(d.category));The above code is working for initial load and also on resizing the visual. Resizing the visual is working because of the second line.
So its causing the code to be duplicated which I do not see in the video tutorial above.
Did anyone experience the same problem? Or is this the way it is supposed to work in the latest version?