我对D3图有问题。在Firefox上，标记未显示。在Chrome上会显示它们。
这是我们正在研究的一个工作示例：https://jsfiddle.net/ztqt2au0/20/
我无法找到可能阻止标记显示的答案。有什么想法吗？
HTML码：
<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="container" class="container">
<div id="sidebar" style="display: none;">
<div class="item-group">
<label class="item-label">Filter</label>
<div id="filterContainer" class="filterContainer checkbox-interaction-group"></div>
</div>
</div>
<div id="graphContainer" class="graphContainer"></div>
</div>
JS-代码：
// method to get page height
function pageHeight() {
var lReturn = window.innerHeight;
if (typeof lReturn == "undefined") {
if (typeof document.documentElement != "undefined" && typeof document.documentElement.clientHeight != "undefined") {
lReturn = document.documentElement.clientHeight;
} else if (typeof document.body != "undefined") {
lReturn = document.body.clientHeight;
}
}
return lReturn;
}
// method to get page width
function pageWidth() {
var lReturn = window.innerWidth;
if (typeof lReturn == "undefined") {
if (typeof document.documentElement != "undefined" && typeof document.documentElement.clientWidth != "undefined") {
lReturn = document.documentElement.clientWidth;
} else if (typeof document.body != "undefined") {
lReturn = document.body.clientWidth;
}
}
return lReturn;
}
// Create Graph using d3.js force-directed layout
$(function () {
var links = [
{source: "Microsoft", target: "Amazon", type: "client_vendor"},
{source: "Microsoft", target: "HTC", type: "client_vendor"},
{source: "Samsung", target: "Apple", type: "client_vendor"},
{source: "Motorola", target: "Apple", type: "client_vendor"},
{source: "Nokia", target: "Apple", type: "client_vendor"},
{source: "HTC", target: "Apple", type: "client_vendor"},
{source: "Kodak", target: "Apple", type: "client_vendor"},
{source: "Microsoft", target: "Barnes & Noble", type: "client_vendor"},
{source: "Microsoft", target: "Foxconn", type: "client_vendor"},
{source: "Oracle", target: "Google", type: "client_vendor"},
{source: "Apple", target: "HTC", type: "client_vendor"},
{source: "Microsoft", target: "Inventec", type: "client_vendor"},
{source: "Samsung", target: "Kodak", type: "client_vendor"},
{source: "LG", target: "Kodak", type: "client_vendor"},
{source: "RIM", target: "Kodak", type: "client_vendor"},
{source: "Sony", target: "LG", type: "client_vendor"},
{source: "Kodak", target: "LG", type: "client_vendor"},
{source: "Apple", target: "Nokia", type: "client_vendor"},
{source: "Qualcomm", target: "Nokia", type: "client_vendor"},
{source: "Apple", target: "Motorola", type: "client_vendor"},
{source: "Microsoft", target: "Motorola", type: "client_vendor"},
{source: "Motorola", target: "Microsoft", type: "client_vendor"},
{source: "Huawei", target: "ZTE", type: "client_vendor"},
{source: "Ericsson", target: "ZTE", type: "client_vendor"},
{source: "Kodak", target: "Samsung", type: "client_vendor"},
{source: "Apple", target: "Samsung", type: "client_vendor"},
{source: "Kodak", target: "RIM", type: "client_vendor"},
{source: "Nokia", target: "Qualcomm", type: "client_vendor"}
];
var nodes = {};
var w = pageWidth() - 10,
h = pageHeight() - 10;
// Compute the distinct nodes from the links.
links.forEach(function(link) {
link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
});
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([w, h])
.linkDistance(200)
.charge(-1000)
.on("tick", tick)
.start();
var drag = force.drag()
.on("dragstart", dragstart);
var svg = d3.select("#graphContainer").append("svg:svg")
.attr("width", w)
.attr("height", h)
.call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom))
.append("g");
// Per-type markers, as they don't inherit styles.
svg.append("svg:defs").selectAll("marker")
.data(["client_vendor", "acquired", "flagship", "merged", "parent_sub", "plaintiff_def", "shareholder_of", "sold", "spin_off_from", "supplies_to", "has_supplier"]) // Defines which type should have marker
.enter().append("svg:marker")
.attr("id", String)
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("refY", -1.5)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("svg:path")
.attr("d", "M0,-5L10,0L0,5");
var path = svg.append("svg:g").selectAll("path")
.data(force.links())
.enter().append("svg:path")
.attr("class", function(d) { return "link " + d.type+"_"+d.status; })
.style("marker-end", function(d) { return "url('#" + d.type + "')"; }) ;
var circle = svg.append("svg:g").selectAll("circle")
.data(force.nodes())
.enter().append("g")
.attr("class", "circle")
.style("stroke", "black")
.style("fill", "white")
.attr("id", function(d) { return "id_"+(d.index);})
.attr("special", function(d) {
if (d.name === $('#tab_graph_company_select_company').val()) {
return "centerNode";
}
})
.on("click", nodeclick)
.call(drag);
//
circle.append("path")
.attr("d", d3.svg.symbol()
.size(200)
.type(function(d) {
if (d.isAgcs) {
return 'diamond';
} else {
return d3.svg.symbolTypes[0];
}
}))
.style("fill", function(d, i) {
if (typeof d.color !== 'undefined' && d.color !== null && d.color !== "") {
return d.color;
} else {
return "grey";
}
})
;
var textNode = circle.append("g");
if (true) {
// A copy of the text with a thick white stroke for legibility.
textNode.append("svg:text")
.attr("dx", 12)
.attr("dy", ".31em")
.text(function(d) {
return d.name;
});
}
// Use elliptical arc path segments to doubly-encode directionality.
function tick() {
path.attr("d", function(d) {
if (d.linknum === 1) {
return "M" + d.source.x + "," + d.source.y + "L" + d.target.x + "," + d.target.y;
} else {
var dx = d.target.x - d.source.x,
dy = d.target.y - d.source.y,
dr = 1000/1; //linknum is defined above
return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " " +0+ " " +0+","+1+" " + d.target.x + "," + d.target.y;
}
});
circle.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
} // End: function tick ()
var k = 0;
while ((force.alpha() > 1e-2) && (k < 150)) {
force.tick(),
k = k + 1;
if (k == 149) {
console.log('trying to fix center node');
}
}
function nodeclick(d) {
if (d3.event.defaultPrevented) return;
console.log('clicked');
}
function dragstart(d) {
d3.event.sourceEvent.stopPropagation();
d3.event.sourceEvent.preventDefault();
console.log('dragged');
d3.select(this).classed("fixed", d.fixed = true);
}
function zoom() {
var zoom = d3.event;
svg.attr("transform", "translate(" + zoom.translate + ")scale(" + zoom.scale + ")");
}
});
var graphView = {
showProperties : function(d3NodeObject, node) {
},
unfixNode : function() {
d3Object.classed("fixed", selectedNode.fixed = false);
},
fixNode : function() {
d3Object.classed("fixed", selectedNode.fixed = true);
},
refocus : function(event) {
},
fixCenterNode : function(d3NodeObject) {
},
selectedNode : null,
d3Object : null,
defaultRadius : 1000,
xAxisRotation : 0,
largeArcFlag : 0, // '1', then one of the two larger arc sweeps will be chosen; otherwise, if large-arc-flag is '0', one of the smaller arc sweeps will be chosen,
sweepFlag : 1, // '1', then the arc will be drawn in a "positive-angle" direction. A value of 0 causes the arc to be drawn in a "negative-angle" direction.
charge : -1000,
linkDistance : 200,
showText : true
}
CSS-代码：
body {
background-color: #eee;
}
path.link {
fill: none;
stroke: #666;
stroke-width: 1.5px;
}
marker#client_vendor {
fill: green;
}
path.link.client_vendor {
stroke: green;
}
marker#acquired {
fill: blue;
}
path.link.acquired {
stroke: blue;
}
marker#competitor {
fill: red;
}
path.link.competitor {
stroke: red;
}
marker#flagship {
fill: orange;
}
path.link.flagship {
stroke: orange;
}
marker#merged {
fill: black;
}
path.link.merged {
stroke: black;
}
marker#parent_sub {
fill: green;
}
path.link.parent_sub {
stroke: green;
stroke-dasharray: 0,2 1;
}
marker#plaintiff_def {
fill: blue;
}
path.link.plaintiff_def {
stroke: blue;
stroke-dasharray: 0,2 1;
}
marker#shareholder_of {
fill: red;
}
path.link.shareholder_of {
stroke: red;
stroke-dasharray: 0,2 1;
}
marker#sold {
fill: orange;
}
path.link.sold {
stroke: orange;
stroke-dasharray: 0,2 1;
}
marker#spin_off_from {
fill: black;
}
path.link.spin_off_from {
stroke: black;
stroke-dasharray: 0,2 1;
}
circle {
cursor: move;
fill: #ccc;
stroke: #333;
stroke-width: 1.5px;
}
text {
font: 10px Verdana, sans-serif;
pointer-events: none;
color: black;
}
text.shadow {
stroke: #fff;
stroke-width: 3px;
stroke-opacity: .8;
}
#networkChart {
margin-top: -20px;
margin-left: -40px;
}
答案 0 :(得分：0)
我通过使用＆＃34; networkChart_orig＆＃34;中的图形移动div解决了这个问题。 to＆＃34; networkChart＆＃34;。
<div id="tabs-0">
<div id="networkChart"></div>
<div class="container-fluid" >
<div id="left-panel" class="cd-panel from-left">
<header class="cd-panel-header">
<h1>Settings</h1>
<a href="#0" class="cd-panel-close">Close</a>
</header>
<div class="cd-panel-container">
<div class="cd-panel-content">
<div style="padding-top: 10px;">
Provider:
<div id="selectedProvider" class="azfs pulldown max-10" data-snippet-name="pulldown" style="width: 100px">
<input type="text" class="pulldown-display" tabindex="-1" value="" placeholder="Choose provider" readonly="readonly" />
<a class="pulldown-button" href="javascript;"></a>
<input class="pulldown-value" type="hidden" value="" />
<div class="pulldown-values-wrapper" style="top:30px; height: 72px;">
<ul class="pulldown-values">
<li data-value='t1'>t1</li>
<li data-value='t2'>t2</li>
</ul>
</div>
</div>
</div>
<div style="padding-top: 10px;">
No. of Levels:
<div id="select_level" class="azfs pulldown max-10" data-snippet-name="pulldown" style="width: 100px">
<input type="text" class="pulldown-display" tabindex="-1" value="1" readonly="readonly" />
<a class="pulldown-button" href="javascript;"></a>
<input class="pulldown-value" type="hidden" value="1" />
<div class="pulldown-values-wrapper" style="top:30px; height: 140px;">
<ul class="pulldown-values">
<li data-value='1'>1</li>
<li data-value='2'>2</li>
<li data-value='3'>3</li>
<li data-value='4'>4</li>
</ul>
</div>
</div>
</div>
<div style="padding-top: 10px;">
Company:
<input id="input_graph_company_search" class="azfs input-field" type="text" disabled="disabled" placeholder="" value="" data-snippet-name="input-field" />
<a id="button_graph_company_search" href="javascript:;" class="azfs button medium disabled" data-snippet-name="button" tabindex="-1">Search</a>
<!--input type="text" id="input_graph_company_search"> <button id="button_graph_company_search">Search</button-->
<div id="searchSpinner_tabs-0"></div>
<br>
<h4>Select Company:</h4>
<select disabled id="tab_graph_company_select_company" size="10"><option value="none">-- NONE --</option></select>
</div>
<div style="padding-top: 10px;">
<h4>Type of Relationship:</h4>
<div class="col-md-12" id="select_relation_type"></div>
</div>
</div> <!-- cd-panel-content -->
</div> <!-- cd-panel-container -->
</div> <!-- cd-panel -->
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12"> <!-- Begin: Left panel col-lg-3-->
<div class="row"> <!-- Begin: inner row for left panel -->
<div id="graphsettings">
<a href="#0">Settings</a>
</div>
</div> <!-- End: inner row for left panel -->
</div> <!-- End: Left panel -->
<div class="col-sm-12 col-md-12 col-lg-12"> <!-- Begin: Main panel -->
<div id="networkChart_orig"></div>
</div> <!-- End: Main panel -->
</div>
</div> <!-- Container end -->
</div> <!-- End of tabs-0 -->
但我不明白有什么区别。 ： - （