PowerBI中D3.js v3 SVG图例与标签不渲染问题求助

在PowerBI中使用D3.js v3开发可视化图表时，图表主体功能正常，但图例元素已存在于页面DOM结构中，却无法呈现视觉效果。以下是相关代码：

var pbi = {
  width:1108,
  height:636,
  colors:[
    "#A70240",
    "#4A2366",
    "#009A44",
    "#A0D081",
    "#01B5BB",
    "#137B88",
    "#5D6771",
    "#CDC8C1"
  ]
// 此处缺少闭合的 }

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

 var ly = d3.scale.ordinal() // For legend
      .rangeRoundBands([0, height], barPad, barOuterPad);
// barPad 和 barOuterPad 未定义


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 + ")");

----

ly.domain(rData.map(function(d) { return d.milestone; }));  // Legend

var milestoneMap = {};  // Maps years to colours
var legendArray = [];   // For legend

rData.forEach(function (d) {
  var entry = d.year;
  var rowEntry = {
    entry: entry,               // Axis label
    milestone: d.milestone,      // For colour lookup
    date: d.date,               // For X position of points
    y: y(entry)
  }

  if (!(d.milestone in milestoneMap)) {
    // First occurrence of each year saved to legend 
    legendArray.push({milestone: d.milestone});
    rowArray.push(rowEntry);
// 此处缺少闭合的 }

var legend = svg.append("g").attr("id", "legend")
    .attr("transform", "translate(" + legendleft + "," + margin.top + ")").selectAll(null)
      .data(legendArray)
    .enter();
  
    // Legend agency labels
  legend.append("text")
      .attr("class", "milestoneLabel")
      .attr("x", 25)
      .attr("y", function(d) { return ly(d.milestone)+5; })
      .style("stroke",  "black")
      .style("stroke-width", .3)
      .text(function(d) { return d.milestone; });

  legend.append("circle")
      .attr("class", "legend")
      .attr("cx", 12)
      .attr("cy", function(d) { return ly(d.milestone); })
      .attr("r", 8)
      .style("stroke", "black")
      .style("stroke-width", 1)
      .style("fill", function(d, i) { return milestoneMap[d.milestone]; });

问题原因分析 #

• 语法错误导致代码执行异常：

  • pbi对象定义末尾缺少闭合的}，会中断后续变量声明；
  • rData.forEach中的if语句未闭合}，导致后续图例创建逻辑被错误包裹在循环内，执行逻辑混乱。

• 比例尺依赖变量未定义：
  ly比例尺使用rangeRoundBands时传入的barPad和barOuterPad未在代码中定义，导致比例尺无法正确计算坐标，图例元素的y/cy值异常，可能被放置在可视区域外。

• milestoneMap未填充颜色映射：
  代码中仅将首次出现的milestone加入legendArray，但未给milestoneMap赋值对应颜色（如pbi.colors中的值），导致图例圆形的fill属性为undefined，无填充色；若同时存在坐标问题，元素会完全不可见。

• 图例位置超出可视区域：
  svg已通过translate(margin.left, margin.top)偏移，而legend的transform使用legendleft = pbi.width - margin.right，最终图例的实际位置为margin.left + legendleft = pbi.width，超出了svg的总宽度（pbi.width），导致元素被裁剪。

内容的提问来源于stack exchange，提问作者strambo