Question

我正在尝试修改一些代码，以使其在PowerBI中运行。尽管我很确定我知道问题出在哪里（函数），但我无法弄清楚。

我遵循了本教程https://www.mssqltips.com/sqlservertip/5273/how-to-render-d3js-custom-charts-in-power-bi-desktop/

-added pbi.height and pbi.width
-removed .append("svg") from svg var
-tried messing with the function by adding pbi.dsv
-i have a pbi object with 2 columns and 2 values
-i also have the css in place

原始代码：https://codepen.io/herudea/pen/YpEeRW

var width = pbi.width,
    height = pbi.height,
    twoPi = 2 * Math.PI,
    progress = 0,
    allocated = "completed",
    total = "total",
    formatPercent = d3.format(".0%");

var arc = d3.svg.arc()
    .startAngle(0)
    .innerRadius(58)
    .outerRadius(66);

var svg = d3.select("#docsChart")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var meter = svg.append("g")
    .attr("class", "funds-allocated-meter");

meter.append("path")
    .attr("class", "background")
    .attr("d", arc.endAngle(twoPi));

var foreground = meter.append("path")
    .attr("class", "foreground");

var percentComplete = meter.append("text")
    .attr("text-anchor", "middle")
    .attr("class", "percent-complete")
    .attr("dy", "0em");

var description = meter.append("text")
    .attr("text-anchor", "middle")
    .attr("class", "description")
    .attr("dy", "2.3em")
    .text("Total Complete");

var i = d3.interpolate(progress, allocated / total);

 d3.transition().duration(1000).tween("progress", function() {
  return   function(t) {
    progress = i(t);
    foreground.attr("d", arc.endAngle(twoPi * progress));
    percentComplete.text(formatPercent(progress));
  };
});

我希望有一个基于创建的pbi对象的工作量具。

使D3适应PowerBI D3 Visual

0 个答案: