D3Plus散点图中未显示图例
D3Plus散点图中未显示图例
提问于 2016-07-13 19:49:19
我正在尝试使用D3Plus构建散点图来显示合规性数字，并希望为不同的点提供图例-但是当我将图例函数添加到我的图形中时，页面上没有显示任何内容。下面是我使用的代码：
<!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>回答 1
Stack Overflow用户
发布于 2016-07-23 05:02:12
为了显示图例，您必须显式设置颜色方法。默认情况下，形状是根据它们的ID着色的，所以在这种情况下，您需要做的就是添加以下行：
.color("name")页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38350915
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号