Attributes are not getting applied after enter() using D3

hari_krishnan — Thu, 12 Mar 2020 11:25:09 GMT

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?

topic Attributes are not getting applied after enter() using D3 in Developer

Attributes are not getting applied after enter() using D3