Javascript D3Plus散点图中未显示图例
我试图使用D3Plus构建散点图来显示合规性数字，并希望为不同的点创建图例-但当我将图例功能添加到图形中时，页面上没有显示任何内容。以下是我使用的代码：Javascript D3Plus散点图中未显示图例,javascript,d3plus,Javascript,D3plus,我试图使用D3Plus构建散点图来显示合规性数字，并希望为不同的点创建图例-但当我将图例功能添加到图形中时，页面上没有显示任何内容。以下是我使用的代码： <!doctype html> <meta charset="utf-8"> <!-- load D3js --> <script src="/lib/d3/d3.js"></script> <!-- load D3plus after D3js --> <scr
<!doctype html>
<meta charset="utf-8">
<!-- load D3js -->
<script src="/lib/d3/d3.js"></script>
<!-- load D3plus after D3js -->
<script src="/lib/d3plus/d3plus.js"></script>
<!-- create container element for visualization -->
<div id="viz" style = "height: 90vh; width: 99vw;"></div>
<script>
// sample data array
var sample_data = [
//Quad I
{"% In Compliance": 100, "% In App": 100, "name": "1"},
//Quad II
{"% In Compliance": -3, "% In App": 100, "name": "2"},
{"% In Compliance": -26, "% In App": 100, "name": "3"},
{"% In Compliance": -55, "% In App": 100, "name": "4"},
{"% In Compliance": -76, "% In App": 100, "name": "5"},
//Quad III
{"% In Compliance": -36, "% In App": -25, "name": "6"},
{"% In Compliance": -66, "% In App": -4, "name": "7"},
//Quad IV
{"% In Compliance": 96, "% In App": -1, "name": "8"},
{"% In Compliance": 87, "% In App": -1, "name": "9"},
{"% In Compliance": 72, "% In App": -5, "name": "10"},
{"% In Compliance": 55, "% In App": -6, "name": "11"},
{"% In Compliance": 52, "% In App": -5, "name": "12"},
{"% In Compliance": 45, "% In App": -5, "name": "13"},
{"% In Compliance": 38, "% In App": -1, "name": "14"},
{"% In Compliance": 29, "% In App": -2, "name": "15"},
{"% In Compliance": 19, "% In App": -7, "name": "16"},
{"% In Compliance": 9, "% In App": -7, "name": "17"}
]
var visualization = d3plus.viz()
.container("#viz") // container DIV to hold the visualization
.data(sample_data) // data to use with the visualization
.type("scatter") // visualization type
.id("name") // key for which our data is unique on
.x({value:"% In Compliance", range:[-104,104]}) // key for x-axis
.y({value:"% In App", range:[-104,106]}) // key for y-axis
.axes({"ticks": false})
.format({ "text" : function( text , key ) {
return text;
}
})
.legend({"size": 50})
.size(25)
.draw() // finally, draw the visualization!
</script>
//样本数据数组
变量样本数据=[
//第一区
{“%In Compliance:100，”%In App:100，“name”：“1”}，
//二区
{“%In Compliance”：-3，”%In-App:100，“name”：“2”}，
{“%In Compliance”：-26，”%In-App:100，“name”：“3”}，
{“%In Compliance”：-55，”%In-App:100，“name”：“4”}，
{“%In Compliance”：-76，”%In-App:100，“name”：“5”}，
//四方III
{“%In Compliance”：-36、“%In App”：-25、“name”：“6”}，
{“%In Compliance”：-66、“%In App”：-4、“name”：“7”}，
//四区
{“%In Compliance”：96，“%In App”：-1，“name”：“8”}，
{“%In Compliance”：87，“%In App”：-1，“name”：“9”}，
{“%In Compliance”：72，“%In App”：-5，“name”：“10”}，
{“%In Compliance”：55，“%In App”：-6，“name”：“11”}，
{“%In Compliance”：52，“%In App”：-5，“name”：“12”}，
{“%In Compliance”：45，“%In App”：-5，“name”：“13”}，
{“%In Compliance”：38，“%In App”：-1，“name”：“14”}，
{“%In Compliance”：29，“%In App”：-2，“name”：“15”}，
{“%In Compliance”：19，“%In App”：-7，“name”：“16”}，
{“%In Compliance”：9，“%In App”：-7，“name”：“17”}
]
var可视化=d3plus.viz（）
.container（“#viz”）//保存可视化的container DIV
.data（sample_data）//用于可视化的数据
.type（“散布”）//可视化类型
.id（“name”）//我们的数据在其上唯一的密钥
.x（{值：%符合要求，范围：[-104104]}）//x轴的键
.y（{值：%在应用程序中，范围：[-104106]}）//y轴的键
.axes（{“ticks”：false}）
.format（{“text”：函数（文本，键）{
返回文本；
}
})
.图例（{“大小”：50}）
.尺寸（25）
.draw（）//最后，绘制可视化！
.color("name")