Thiết kế website giá rẻ

Question

i am trying to port a d3 code on powerbi but it keeps giving me a blank display without showing any error:

this is my original d3 code tested working on html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Histogram with D3.js</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <style>
    /* Add any CSS styles here */
    .bar {
      fill: steelblue;
    }
  </style>
</head>
<body>
  <div id="histogram"></div>

  <script>
    // Load the CSV file
    d3.csv("unemployment-x.csv").then(function(data) {
      // Convert data values to numbers if necessary
      data.forEach(function(d) {
        d.rate = +d.rate; // Assuming "rate" is the column name containing numerical values
      });

      // Set up dimensions for the histogram
      var margin = {top: 20, right: 30, bottom: 30, left: 40},
          width = 960 - margin.left - margin.right,
          height = 500 - margin.top - margin.bottom;

      // Create SVG element for the histogram
      var svg = d3.select("#histogram")
                  .append("svg")
                  .attr("width", width + margin.left + margin.right)
                  .attr("height", height + margin.top + margin.bottom)
                  .append("g")
                  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      // Create histogram scale
      var x = d3.scaleLinear()
                .domain([0, d3.max(data, function(d) { return d.rate; })])
                .range([0, width]);

      // Generate histogram bins
      var bins = d3.histogram()
                   .value(function(d) { return d.rate; })
                   .domain(x.domain())
                   .thresholds(20) // Adjust the number of bins as needed
                   (data);

      // Create y scale
      var y = d3.scaleLinear()
                .domain([0, d3.max(bins, function(d) { return d.length; })])
                .range([height, 0]);

      // Create bars for the histogram
      svg.selectAll(".bar")
         .data(bins)
         .enter().append("rect")
         .attr("class", "bar")
         .attr("x", 1)
         .attr("transform", function(d) { return "translate(" + x(d.x0) + "," + y(d.length) + ")"; })
         .attr("width", function(d) { return x(d.x1) - x(d.x0) - 1; })
         .attr("height", function(d) { return height - y(d.length); });

      // Add x axis
      svg.append("g")
         .attr("transform", "translate(0," + height + ")")
         .call(d3.axisBottom(x));

      // Add y axis
      svg.append("g")
         .call(d3.axisLeft(y));
    });
  </script>
</body>
</html>

my data is like this i am trying to plot an histogram of unemployement rate in each county:

id,state,county,rate
1001,Alabama,Autauga County,5.1
1003,Alabama,Baldwin County,4.9
1005,Alabama,Barbour County,8.6
1007,Alabama,Bibb County,6.2
1009,Alabama,Blount County,5.1

To integrate this code with power bi i had to install D3js extension version 3.5 and had to get rid of the html part:


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

// Create SVG element for the histogram
var svg = d3.select("#histogram")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Create histogram scale
var x = d3.scale.linear()
          .range([0, width]);

// Generate histogram bins
var bins = d3.layout.histogram()
             .thresholds(20);

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

// Load the CSV file
pbi.csv(type,function(data) {
      x.domain([0, d3.max(data, function(d) { return d.rate; })])
      bins.value(function(d) { return d.rate; })
          .domain(x.domain())
          (data);
           
      y.domain([0, d3.max(bins, function(d) { return d.length; })])

      // Create bars for the histogram
      svg.selectAll(".bar")
         .data(bins)
         .enter().append("rect")
         .attr("class", "bar")
         .attr("x", 1)
         .attr("transform", function(d) { return "translate(" + x(d.x0) + "," + y(d.length) + ")"; })
         .attr("width", function(d) { return x(d.x1) - x(d.x0) - 1; })
         .attr("height", function(d) { return height - y(d.length); });

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

      // Add y axis
      svg.append("g")
         .call(d3.svg.axis().scale(y).orient("left"));
    });
function type(d) {
  d.rate = +d.rate;
  return d;}

Anyone can help me on this ? or suggest a better way for debugging?

Thiết kế website giá rẻ

Danh mục

porting D3js code to powerbi not working showing blank chart