PowerBI中使用D3.js创建柱状图失败求助

Hey there! Let's dig into why your D3.js bar chart is only showing axes (or nothing at all) in Power BI. Looking at your code snippet, there are a few key gaps and small issues that are stopping the bars from rendering properly. Let's break it down and fix it step by step.

Key Issues in Your Original Code #

• No bar elements added: You set up the SVG container and scales, but never actually created the rectangular bars that make up the chart. That's why you only see axes!
• Incomplete axis rendering: Your code cuts off mid-way when adding the axes, so even those might not be fully set up.
• Quotation mark errors: The " in your code is HTML-escaped, which will cause syntax errors in JavaScript—you need to use regular double/single quotes instead.
• Overly wide bar spacing: Using 0.9 in rangeRoundBands means 90% of the space is between bars, leaving almost no room for the bars themselves (they'd be practically invisible).
• Potential data type issues: If your Force values are coming through as strings from Power BI, D3 can't calculate the y-scale correctly.

Fixed Full Code #

Here's the corrected version with all missing pieces added:

var margin = {top: 70, right: 70, bottom: 70, left: 70},
    width = pbi.width - margin.left - margin.right,   
    height = pbi.height - margin.top - margin.bottom; 

// Initialize scales (keeping v3 syntax since you're using d3.scale.ordinal)
var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], 0.1); // Reduced spacing to give bars room

var y = d3.scale.linear()
    .range([height, 0]);

// Create SVG container with fixed quotes
var svg = d3.select("#chart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Properly handle Power BI data loading
pbi.dsv(",", function(data) { // Specify your delimiter (comma here, adjust if needed)
    // Convert Force to number (critical if Power BI returns it as a string)
    data.forEach(function(d) {
        d.Force = +d.Force;
    });

    // Set scale domains
    x.domain(data.map(function(d) { return d.Metal; }));
    y.domain([0, d3.max(data, function(d) { return d.Force; })]);

    // Add full x-axis
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.svg.axis()
            .scale(x)
            .orient("bottom"));

    // Add full y-axis
    svg.append("g")
        .attr("class", "y axis")
        .call(d3.svg.axis()
            .scale(y)
            .orient("left")
            .ticks(5)); // Set number of y-axis ticks

    // THE MOST IMPORTANT PART: Add the bar elements!
    svg.selectAll(".bar")
        .data(data)
        .enter()
        .append("rect")
        .attr("class", "bar")
        .attr("x", function(d) { return x(d.Metal); })
        .attr("width", x.rangeBand())
        .attr("y", function(d) { return y(d.Force); })
        .attr("height", function(d) { return height - y(d.Force); });
});

Quick Additional Checks #

1. Verify the container: Make sure your Power BI visual's HTML has a <div id="chart"></div> element—this is where D3 will render the chart.
2. D3 version match: This code uses D3 v3 syntax (since you used d3.scale.ordinal). If you're using D3 v4 or later, the syntax for scales and axes will be different (e.g., d3.scaleBand() instead of ordinal).
3. Check data structure: Open your browser's developer console and add console.log(data) inside the pbi.dsv callback to confirm your data has the Metal and Force fields, and that Force is a number.

备注：内容来源于stack exchange，提问作者Elysian