Forum Discussion

hari_krishnan's avatar
6 years ago

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?

 

No RepliesBe the first to reply