1
저는 단백질 상호 작용 데이터를위한 하이브 플롯을 만들려고했습니다. 이 코드 (Work in Progress)를 실행할 때 하이브 음모는 없습니다. 또한 웹 속성에서 '정의되지 않은 속성'유형 '을 읽을 수 없습니다.'라는 오류가 표시됩니다.정의되지 않은 속성을 읽을 수 없습니다 - D3 하이브 플롯
오류 : 나는 nodes.type하는 코드를 변경하면
은 *, nodes.position는 무승부 links.SourceNode.type 그것은 이전 오류와 함께 이상한 오류가 발생, 일부를 링크에 유효하지 않은 값을 특성 (D)에 대해 = "MNaN, NaNCNaN NaN이 NaN가 NaN이 NaN이는 NaN이"samplehiveplot.html 1 catch되지 않은 형식 오류는 : 정의의 속성 '타입'*
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis {
stroke: #000;
stroke-width:1.5px;
}
.node {
stroke:#000;
}
.link {
fill: none;
stroke-width: 1.5px;
stroke-opacity: 0.8;
}
.link.turnedOn {
stroke-width: 3px;
}
.link.turnedOff {
stroke-opacity: 0.3;
stroke-width: 1px;
}
.node.turnedOn {
stroke: red;
stroke-width: 3px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.hive.v0.min.js"></script>
<script>
var width = 1000,
height = 1000,
innerRadius = 20,
outerRadius = 240;
var angle = d3.scale.ordinal()
.domain(d3.range(4))
.rangePoints([0, 2 * Math.PI]),
radius = d3.scale.linear()
.range([innerRadius, outerRadius]),
color = d3.scale.category10()
.domain(d3.range(20));
\t
\t \t \t
var nodes = [{"number":1,"type":0,"position":0.1,"name":"TFC3","group":"yal001c"},
{"number":2,"type":2,"position":0.1003,"name":"SSA1","group":"yal005c"},
{"number":3,"type":2,"position":0.1006,"name":"TPD3","group":"yal016w"},
{"number":4,"type":2,"position":0.1009,"name":"CCR4","group":"yal021c"},
{"number":5,"type":2,"position":0.1012,"name":"PMT2","group":"yal023c"},
{"number":6,"type":2,"position":0.1015,"name":"LTE1","group":"yal024c"},
{"number":7,"type":2,"position":0.1018,"name":"YAL028W","group":"yal028w"},
{"number":8,"type":2,"position":0.1021,"name":"MYO4","group":"yal029c"},
{"number":9,"type":2,"position":0.1024,"name":"SNC1","group":"yal030w"},
{"number":10,"type":1,"position":0.1027,"name":"FUN20","group":"yal032c"},
{"number":11,"type":0,"position":0.103,"name":"YAL034W-A","group":"yal034w-a"}
];
var links = [
{"SourceNode": nodes[1], "TargetNode": nodes[35]},
{"SourceNode": nodes[1], "TargetNode": nodes[856]},
{"SourceNode": nodes[1], "TargetNode": nodes[1647]},
{"SourceNode": nodes[1], "TargetNode": nodes[2009]},
{"SourceNode": nodes[1], "TargetNode": nodes[2024]},
{"SourceNode": nodes[2],"TargetNode": nodes[234]},
{"SourceNode": nodes[2],"TargetNode": nodes[1376]},
{"SourceNode": nodes[2],"TargetNode": nodes[1488]},
{"SourceNode": nodes[3],"TargetNode": nodes[671]}
];
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width/2 + "," + height/2 + ")");
svg.selectAll(".axis")
.data(d3.range(3))
.enter().append("line")
.attr("class", "axis")
.attr("transform", function(d) { return "rotate(" + degrees(angle(d)) + ")" })
.attr("x1", radius.range()[0])
.attr("x2", radius.range()[1]);
// draw links
svg.selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("d", d3.hive.link()
.angle(function(d) { return angle(d.type); })
.radius(function(d) { return radius(d.position); }))
.style("stroke", function(d) { return color(d.SourceNode.type); })
.on("mouseover", linkMouseover)
.on("mouseout", mouseout);
// draw nodes
svg.selectAll(".node")
.data(nodes)
.enter().append("circle")
.attr("class", "node")
.attr("transform", function(d) { return "rotate(" + degrees(angle(d.type)) + ")"; })
.attr("cx", function(d) { return radius(d.position); })
.attr("r", 5)
.style("fill", function(d) { return color(d.type); })
.on("mouseover", nodeMouseover)
.on("mouseout", mouseout);
// highlight link and connected nodes on mouseover
function linkMouseover(d) {
svg.selectAll(".link")
.classed("turnedOn", function(dl) {
return dl === d;
})
.classed("turnedOff", function(dl) {
return !(dl === d);
})
svg.selectAll(".node")
.classed("turnedOn", function(dl) {
return dl === d.SourceNode || dl === d.TargetNode;
})
}
// highlight node and connected links on mouseover
function nodeMouseover(d) {
svg.selectAll(".link")
.classed("turnedOn", function(dl) {
return dl.SourceNode === d || dl.TargetNode === d;
})
.classed("turnedOff", function(dl) {
return !(dl.SourceNode === d || dl.TargetNode === d)
});
d3.select(this)
.classed("turnedOn", true);
}
// clear highlighted nodes or links
function mouseout() {
svg.selectAll(".turnedOn").classed("turnedOn", false);
svg.selectAll(".turnedOff").classed("turnedOff", false);
}
function degrees(radians) {
return radians/Math.PI * 180 - 90;
}
</script>상관 ID를 판독 할 수 없다 너 왜? ?? 다른 유사한 질문을 시도했지만 그들로부터 답을 얻을 수 없었습니다. 크롬 브라우저 (최신 버전)를 사용하고 있습니다. 이 코드는 다음에서 수정 된 버전입니다. http://bl.ocks.org/officeofjane/ad5204f200a830acc8dc
감사합니다. SourceNode 및 TargetNode를 소스 및 대상으로 변경했습니다. 데이터에는 총 2114 개의 노드가 있습니다. 나는 우주 문제 때문에 그 모든 것을 스 니펫에 언급하지 않았습니다. 죄송합니다. 혼란이 생겼습니다. 나는 처음에 그것을 언급했다고 생각했다. – Minu
@Minu : 아, 말이 되네. 내 대답으로 문제가 해결되었다고 생각되면 [수락 할 수 있습니다] (http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work). 그리고 나는 당신의 다른 질문을 살펴볼 것입니다. – mdml