使用d3.js繪制5路圖
[英]Draw 5 way diagram using d3.js
問題描述
我正在使用venn.js來嘗試可視化5向數據。 我使用的數據來自R的VennDiagram Package 。 但它不知何故不能出現。 大多數例子都使用偶數集，奇數有什么特別之處嗎？
我的代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>mds venn.js example</title>
<style>
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
}
</style>
</head>
<body>
<div id="venn"></div>
</body>
<script src="http://www.numericjs.com/lib/numeric-1.2.6.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="venn.js"></script>
<script src="http://www.benfrederickson.com/images/mds.js"></script>
<script>
var sets = [{sets: ['A'], size: 301},
{sets: ['B'], size: 321},
{sets: ['C'], size: 311},
{sets: ['D'], size: 321},
{sets: ['E'], size: 301}
{sets: ['A','B'], size: 188},
{sets: ['A','C'], size: 191},
{sets: ['A','D'], size: 184},
{sets: ['A','E'], size: 177},
{sets: ['B','C'], size: 194},
{sets: ['B','D'], size: 197},
{sets: ['B','E'], size: 190},
{sets: ['C','D'], size: 190},
{sets: ['C','E'], size: 173},
{sets: ['D','E'], size: 186}];
var chart = venn.VennDiagram()
.width(600)
.height(400)
.layoutFunction(
function(d) { return venn.venn(d, { initialLayout: venn.classicMDSLayout });}
);
d3.select("#venn").datum(sets).call(chart);
</script>
</html>
原始數據來自
venn.plot <- draw.quintuple.venn(
area1 = 301,
area2 = 321,
area3 = 311,
area4 = 321,
area5 = 301,
n12 = 188,
n13 = 191,
n14 = 184,
n15 = 177,
n23 = 194,
n24 = 197,
n25 = 190,
n34 = 190,
n35 = 173,
n45 = 186,
n123 = 112,
n124 = 108,
n125 = 108,
n134 = 111,
n135 = 104,
n145 = 104,
n234 = 111,
n235 = 107,
n245 = 110,
n345 = 100,
n1234 = 61,
n1235 = 60,
n1245 = 59,
n1345 = 58,
n2345 = 57,
n12345 = 31,
category = c("A", "B", "C", "D", "E"),
fill = c("dodgerblue", "goldenrod1", "darkorange1", "seagreen3", "orchid3"),
cat.col = c("dodgerblue", "goldenrod1", "darkorange1", "seagreen3", "orchid3"),
cat.cex = 2,
margin = 0.05,
cex = c(1.5, 1.5, 1.5, 1.5, 1.5, 1, 0.8, 1, 0.8, 1, 0.8, 1, 0.8, 1, 0.8,
1, 0.55, 1, 0.55, 1, 0.55, 1, 0.55, 1, 0.55, 1, 1, 1, 1, 1, 1.5),
ind = TRUE
);
1 個解決方案
解決方案1
0 已采納 2015-03-05 17:08:55
你的javascript中有一個語法錯誤，這一行“{sets：['E']，size：301}”之后應該有一個逗號 - 添加逗號並產生如下輸出：
顯示圖表（使用d3.js）
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.