Understanding the working of .enter() in D3 Js and Power BI

user_13049539 0
Viewed 101

I am following the video tutorial (https://channel9.msdn.com/Blogs/Azure/Building-Power-BI-custom-visuals-that-meet-your-app-needs) to create a bar chart (custom visual) within Power BI.

Code snippet (in the video at 13.40):

    let bars = this.barContainer.selectAll('.bar').data(viewModel.dataPoints);

    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 code is written in update method of visual.ts file.

As per my understanding, the enter() method will create rect elements with class bar based on the viewModel.dataPoints data.

The problem is I am not able to get it to work upon initial load, when the visual is loaded, this works only when the visual is resized. I cannot see any attributes getting applied on the rect elements upon load, but its getting applied when a resize is made on the visual.

If 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.transition()
        .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 code works fine, The attributes are getting applied for both initial load and resize.

Additional Info (Constructor code)

    let svg = this.svg = d3.select(options.element).append('svg').classed('barChart', true);
    this.barContainer = svg.append('g').classed('barContainer', true);
    this.xAxis = svg.append('g').classed('xAxis', true);

Is this the way its supposed to work in the latest version (D3 Js 5.0)? or I am doing anything wrong?

powerbi d3.js
2 Answers

The .merge() function does the trick.

The solution is:

let bars = this.barContainer.selectAll('.bar').data(viewModel.dataPoints);
        const a = bars.enter().append('rect').merge(<any>bars); // merge before attr()
        a.classed('bar', true);
        a 
            .transition().duration(50)
            .attr('width', xScale.bandwidth())
            .attr('height', d => height - yScale(d.value))
            .attr('y', d => yScale(d.value))
            .attr('x', d => xScale(d.category)); // This code now works for initial 
                                                 // load and update.
        bars.exit().remove();
user_130495390
user_75160270
Related