Javascript 使用getData（）将表格数据馈送到D3图表中

有没有人对使用Tableau函数格式化和提供底层数据有什么建议？我知道我需要为基础数据创建一个数组，但不确定如何创建。基础数据采用以下JSON格式：

[[
    {
        "value":"Thais Sissman",
        "formattedValue":"Thais Sissman"
    },
    {
        "value":"-0.6860335195530726",
        "formattedValue":"-68.6%"
    },
    {
        "value":"-3.3156",
        "formattedValue":"($3)"
    },
    {
        "value":"793",
        "formattedValue":"793"
    },
    {
        "value":"4.833000000000001",
        "formattedValue":"$5"
    }
],
[
    {
        "value":"Lela Donovan",
        "formattedValue":"Lela Donovan"
    },
    {
        "value":"0.0875",
        "formattedValue":"8.8%"
    },
    {
        "value":"0.4641",
        "formattedValue":"$0"
    },
    {    
        "value":"792",
        "formattedValue":"792"
    },
    {
        "value":"5.304",
        "formattedValue":"$5"
    }
]]

以下是我的JavaScript代码：

$(document).ready(function initViz() {
var containerDiv = document.getElementById("vizContainer"),
    url = "https://SERVER-NAME/t/gfm/views/Superstore/Customers?:embed=y&:showShareOptions=true&:display_count=no&:showVizHome=no",
    options = {
        hideTabs: true,
        hideToolbar: true,
        onFirstInteractive: function () {
        document.getElementById('getData').disabled = false; // Enable our button
                   }
                };
            viz = new tableau.Viz(containerDiv, url, options);
        });

//when viz is loaded (onFirstInteractive), request data
function getSummaryData() {
    options = {
        maxRows: 0, // Max rows to return. Use 0 to return all rows
        ignoreAliases: false,
        ignoreSelection: true,
        includeAllColumns: false
};

sheet = viz.getWorkbook().getActiveSheet();

//if active tab is a worksheet, get data from that sheet
if (sheet.getSheetType() === 'worksheet') {
    sheet.getSummaryDataAsync(options).then(function (t) {
        buildMenu(t);
});

//if active sheet is a dashboard get data from a specified sheet
}   else {
    worksheetArray = viz.getWorkbook().getActiveSheet().getWorksheets();
    for (var i = 0; i < worksheetArray.length; i++) {
        worksheet = worksheetArray[i];
        sheetName = worksheet.getName();
        if (sheetName == 'CustomerRank') {
            worksheetArray[i].getSummaryDataAsync(options).then(function (t) {
            var data = t.getData();  
            var columns = t.getColumns();
            table = t; 
            var tgt = document.getElementById("dataTarget");
            tgt.innerHTML = "<h4>Underlying Data:</h4><p>" + JSON.stringify(table.getData()) + "</p>";
            buildVisual(t);
            });
        }
    }
    }
} 

function buildVisual(table) {

//the data returned from the tableau API
var columns = table.getColumns();
var data = table.getData();

//convert to field:values convention
function reduceToObjects(cols,data) {
    var fieldNameMap = $.map(cols, function(col) { return col.getFieldName(); });
    var dataToReturn = $.map(data, function(d) {
        return d.reduce(function(memo, value, idx) {
           memo[fieldNameMap[idx]] = value.value; return memo;
        }, {});
    });

    return dataToReturn;
}

var niceData = reduceToObjects(columns, data);

var svg = d3.select('body')
  .append('svg')
  .attr('width', 400)
  .attr('height', 200)
  .attr('id', 'chart');

// add an SVG group element for each user
var series = svg.selectAll('g.series')
  .data(d3.keys(dataTarget))
  .enter()
  .append('g')
  .attr('class', 'series');

var width = 300,
    height = 300,
    radius = Math.min(width, height) / 2;

var color = d3.scale.category20();

var pie = d3.layout.pie()
    .sort(null);

var piedata = pie(niceData.data);

var arc = d3.svg.arc()
    .innerRadius(radius - 100)
    .outerRadius(radius - 50);

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

var path = svg.selectAll("path")
    .data(piedata)
    .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc);

svg.selectAll("text").data(piedata)
    .enter()
    .append("text")
    .attr("text-anchor", "middle")
    .attr("x", function(d) {
        var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2;
        d.cx = Math.cos(a) * (radius - 75);
        return d.x = Math.cos(a) * (radius - 20);
    })
    .attr("y", function(d) {
        var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2;
        d.cy = Math.sin(a) * (radius - 75);
        return d.y = Math.sin(a) * (radius - 20);
    })
    .text(function(d) { return d.value; })
    .each(function(d) {
        var bbox = this.getBBox();
        d.sx = d.x - bbox.width/2 - 2;
        d.ox = d.x + bbox.width/2 + 2;
        d.sy = d.oy = d.y + 5;
    });

svg.append("defs").append("marker")
    .attr("id", "circ")
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("refX", 3)
    .attr("refY", 3)
    .append("circle")
    .attr("cx", 3)
    .attr("cy", 3)
    .attr("r", 3);

svg.selectAll("path.pointer").data(piedata).enter()
    .append("path")
    .attr("class", "pointer")
    .style("fill", "none")
    .style("stroke", "black")
    .attr("marker-end", "url(#circ)")
    .attr("d", function(d) {
        if(d.cx > d.ox) {
            return "M" + d.sx + "," + d.sy + "L" + d.ox + "," + d.oy + " " + d.cx + "," + d.cy;
        } else {
            return "M" + d.ox + "," + d.oy + "L" + d.sx + "," + d.sy + " " + d.cx + "," + d.cy;
        }
    });
}

$（document）.ready（函数initViz（）{
var containerDiv=document.getElementById（“vizContainer”），
url=”https://SERVER-NAME/t/gfm/views/Superstore/Customers?:embed=y&:showShareOptions=true&:display_count=no&:showVizHome=no",
选项={
希德塔布斯：没错，
是的，
onFirstInteractive:函数（）{
document.getElementById（'getData'）。disabled=false；//启用我们的按钮
}
};
viz=新的tableau.viz（containerDiv、url、选项）；
});
//加载viz（onFirstInteractive）时，请求数据
函数getSummaryData（）{
选项={
maxRows:0，//要返回的最大行数。使用0返回所有行
忽略别名：false，
忽略选择：正确，
includealcolumns:false
};
sheet=viz.getWorkbook（）.getActiveSheet（）；
//如果活动选项卡是工作表，则从该工作表获取数据
如果（sheet.getSheetType（）=='工作表'）{
sheet.getSummaryDataAsync（选项）.then（函数（t）{
构建菜单（t）；
});
//如果活动工作表是仪表板，则从指定工作表获取数据
}否则{
worksheetArray=viz.getWorkbook（）.getActiveSheet（）.getWorksheets（）；
对于（变量i=0；i”；
建筑视觉（t）；
});
}
}
}
} 
函数buildVisual（表）{
//从tableau API返回的数据
var columns=table.getColumns（）；
var data=table.getData（）；
//转换为字段：值约定
函数约简对象（列、数据）{
var fieldNameMap=$.map（cols，函数（col）{return col.getFieldName（）；}）；
var dataToReturn=$.map（数据，函数（d）{
返回d.reduce（函数（备注、值、idx）{
备注[fieldNameMap[idx]]=value.value；返回备注；
}, {});
});
返回数据返回；
}
var niceData=reducetobjects（列、数据）；
var svg=d3.select（'body'）
.append（'svg'）
.attr（'width'，400）
.attr（'height'，200）
.attr（'id'，'chart'）；
//为每个用户添加一个SVG组元素
var series=svg.selectAll（'g.series'）
.数据（d3.键（数据目标））
.输入（）
.append（'g'）
.attr（“类”、“系列”）；
可变宽度=300，
高度=300，
半径=数学最小值（宽度、高度）/2；
var color=d3.scale.category20（）；
var pie=d3.layout.pie（）
.sort（空）；
var piedata=pie（niceData.data）；
var arc=d3.svg.arc（）
.内半径（半径-100）
.外层（半径-50）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var path=svg.selectAll（“路径”）
.数据（piedata）
.enter（）.append（“路径”）
.attr（“fill”，函数（d，i）{返回颜色（i）；}）
.attr（“d”，弧）；
svg.selectAll（“文本”）.data（piedata）
.输入（）
.append（“文本”）
.attr（“文本锚定”、“中间”）
.attr（“x”，函数（d）{
var a=d.startAngle+（d.endAngle-d.startAngle）/2-Math.PI/2；
d、 cx=数学cos（a）*（半径-75）；
返回d.x=数学cos（a）*（半径-20）；
})
.attr（“y”，函数（d）{
var a=d.startAngle+（d.endAngle-d.startAngle）/2-Math.PI/2；
d、 cy=数学sin（a）*（半径-75）；
返回d.y=数学sin（a）*（半径-20）；
})
.text（函数（d）{返回d.value；}）
.每个功能（d）{
var bbox=this.getBBox（）；
d、 sx=d.x-bbox.width/2-2；
d、 ox=d.x+bbox.width/2+2；
d、 sy=d.oy=d.y+5；
});
svg.append（“defs”）.append（“marker”）
.attr（“id”、“circ”）
.attr（“markerWidth”，6）
.attr（“markerHeight”，6）
.attr（“参考文献”，3）
.attr（“参考文献”，第3页）
.附加（“圆圈”）
.attr（“cx”，3）
.attr（“cy”，3）
.attr（“r”，3）；
selectAll（“path.pointer”）.data（piedata）.enter（）
.append（“路径”）
.attr（“类”、“指针”）
.style（“填充”、“无”）
.style（“笔划”、“黑色”）
.attr（“标记结束”、“url（#circ）”）
.attr（“d”，函数（d）{
如果（d.cx>d.ox）{
返回“M”+d.sx+”、“+d.sy+”L”+d.ox+”、“+d.oy+”、“+d.cx+”、“+d.cy”；
}否则{
返回“M”+d.ox+，“+d.oy+”L“+d.sx+”，“+d.sy+”，“+d.cx+”，“+d.cy”；
}
});
}