D3圖表完美的作品上的jsfiddle但不能在本地主機上

所以我試圖讓這個工作的jsfiddle作品：D3圖表完美的作品上的jsfiddle但不能在本地主機上

它完美地在那裏。但是，當我去我的機器並使用代碼（只是爲了看看它是否工作之前做出我自己的更改）它不起作用，只是得到灰色的div。控制檯中沒有錯誤。

我的代碼的順序如下：

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script> 
    <script src="http://d3js.org/d3.v2.min.js" charset="utf-8"></script>

然後在div

<div id="chart"></div>

那麼腳本。

我試過在$(document).ready中換行，在外部文件中試過它。似乎沒有任何工作。我在智慧結束試圖找出這一點，任何幫助將不勝感激。

來源

2016-04-11 Peter Clement

您的HTML頁面格式是否正確？以下工作適合我：

<html> 

<head> 
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script> 
<script src="http://d3js.org/d3.v2.min.js" charset="utf-8"></script> 

<style> 
#chart { 
    width: 500px; 
    height: 400px; 
    background: #bbb; 
    font-size: 10px; 
} 

text { 
    pointer-events: none; 
} 

.grandparent text { 
    font-weight: bold; 
    font-size: 16px; 
} 

rect { 
    fill: none; 
    stroke: #fff; 
} 

rect.parent, 
.grandparent rect { 
    stroke-width: 2px; 
} 
.grandparent rect { 
    fill: #fff; 
} 

.children rect.parent, 
.grandparent rect { 
    cursor: pointer; 
} 

rect.parent { 
    pointer-events: all; 
} 

.children:hover rect.child, 
.grandparent:hover rect { 
    fill: #aaa; 
} 
</style> 
</head> 

<body> 
<div id="chart"></div> 

<script> 
var data = { 
    "name": "projects", 
    "children": [ 
     { 
      "name": "Department of Agriculture", 
      "children": [ 
       { 
        "name": "Annual Agency Operations.", 
        "value": 15.297 
       }, 
       { 
        "name": "Program Areas will migrate their data over to the agencys virtual servers and shut down their current server.", 
        "value": 0.179 
       }, 
       { 
        "name": "Programs Areas will replace 1/3 of their computers which have an expired warranty.", 
        "value": 1.46 
       }, 
       { 
        "name": "Production Support including Analysis, Software Fixes, System Software Upgrades, Help Desk.", 
        "value": 1.8205 
       }, 
       { 
        "name": "Production Support including Analysis, Software Fixes, System Software Upgrades, Help Desk. (1)", 
        "value": 1.713 
       } 
      ] 
     }, 
     { 
      "name": "Department of Commerce", 
      "children": [ 
       { 
        "name": "Parallel test components of new BP system.", 
        "value": 1.24 
       }, 
       { 
        "name": "Initiate real-time parallel testing of integrated system for producing monthly GDP and personal income estimates.", 
        "value": 0.413 
       }, 
       { 
        "name": "Produce timely, relevant, and accurate economic accounts data in an objective and cost-effective manner.", 
        "value": 9.696 
       }, 
       { 
        "name": "Maintain the integrity of BEA Statistics by completing independent testing of security controls.", 
        "value": 0.59 
       }, 
       { 
        "name": "Produce timely, relevant, and accurate economic accounts data in an objective and cost-effective manner. (1)", 
        "value": 9.76 
       } 
      ] 
     } 
    ] 
}; 

// This example has been adapted from Mike Bostocks Zooming treemap example at http://bost.ocks.org/mike/treemap/. Many thanks to Mike for his excellent work in this area. 

var margin = {top: 30, right: 0, bottom: 0, left: 0}, 
    width = 500, 
    height = 400 - margin.top - margin.bottom, 
    formatNumber = d3.format(",d"), 
    transitioning; 

var x = d3.scale.linear() 
    .domain([0, width]) 
    .range([0, width]); 

var y = d3.scale.linear() 
    .domain([0, height]) 
    .range([0, height]); 

var treemap = d3.layout.treemap() 
    .children(function(d, depth) { return depth ? null : d.children; }) 
    .sort(function(a, b) { return a.value - b.value; }) 
    .ratio(height/width * 0.5 * (1 + Math.sqrt(5))) 
    .round(false); 

var svg = d3.select("#chart").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.bottom + margin.top) 
    .style("margin-left", -margin.left + "px") 
    .style("margin.right", -margin.right + "px") 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
    .style("shape-rendering", "crispEdges"); 

var grandparent = svg.append("g") 
    .attr("class", "grandparent"); 

grandparent.append("rect") 
    .attr("y", -margin.top) 
    .attr("width", width) 
    .attr("height", margin.top); 

grandparent.append("text") 
    .attr("x", 6) 
    .attr("y", 6 - margin.top) 
    .attr("dy", ".75em"); 

initialize(data); 
accumulate(data); 
layout(data); 
display(data); 

function initialize(root) { 
    root.x = root.y = 0; 
    root.dx = width; 
    root.dy = height; 
    root.depth = 0; 
} 

// Aggregate the values for internal nodes. This is normally done by the 
// treemap layout, but not here because of our custom implementation. 
function accumulate(d) { 
    return d.children 
     ? d.value = d.children.reduce(function(p, v) { return p + accumulate(v); }, 0) 
     : d.value; 
} 

// Compute the treemap layout recursively such that each group of siblings 
// uses the same size (1×1) rather than the dimensions of the parent cell. 
// This optimizes the layout for the current zoom state. Note that a wrapper 
// object is created for the parent node for each group of siblings so that 
// the parent’s dimensions are not discarded as we recurse. Since each group 
// of sibling was laid out in 1×1, we must rescale to fit using absolute 
// coordinates. This lets us use a viewport to zoom. 
function layout(d) { 
    if (d.children) { 
     treemap.nodes({children: d.children}); 
     d.children.forEach(function(c) { 
     c.x = d.x + c.x * d.dx; 
     c.y = d.y + c.y * d.dy; 
     c.dx *= d.dx; 
     c.dy *= d.dy; 
     c.parent = d; 
     layout(c); 
     }); 
    } 
} 

function display(d) { 
    grandparent 
     .datum(d.parent) 
     .on("click", transition) 
     .select("text") 
     .text(name(d)); 

    var g1 = svg.insert("g", ".grandparent") 
     .datum(d) 
     .attr("class", "depth"); 

    var g = g1.selectAll("g") 
     .data(d.children) 
     .enter().append("g"); 

    g.filter(function(d) { return d.children; }) 
     .classed("children", true) 
     .on("click", transition); 

    g.selectAll(".child") 
     .data(function(d) { return d.children || [d]; }) 
     .enter().append("rect") 
     .attr("class", "child") 
     .call(rect); 

    g.append("rect") 
     .attr("class", "parent") 
     .call(rect) 
     .append("title") 
     .text(function(d) { return formatNumber(d.value); }); 

    g.append("text") 
     .attr("dy", ".75em") 
     .text(function(d) { return d.name; }) 
     .call(text); 

    var color = d3.scale.category20c(); 
    var colors = {}; 
    g.filter(function(d) { 
     var parent_depth = (d.parent).depth; 
     var current_node = d; 
     if (parent_depth != 0) { 
      current_node = d.parent; 
     } 
     if (!current_node.color) { 
      current_node.color = color(current_node.name); 
     } 
    $(this).find(".child").css("fill",current_node.color); 
    }); 

    function transition(d) { 
     if (transitioning || !d) return; 
     transitioning = true; 

     var g2 = display(d), 
      t1 = g1.transition().duration(750), 
      t2 = g2.transition().duration(750); 

     // Update the domain only after entering new elements. 
     x.domain([d.x, d.x + d.dx]); 
     y.domain([d.y, d.y + d.dy]); 

     // Enable anti-aliasing during the transition. 
     svg.style("shape-rendering", null); 

     // Draw child nodes on top of parent nodes. 
     svg.selectAll(".depth").sort(function(a, b) { return a.depth - b.depth; }); 

     // Fade-in entering text. 
     g2.selectAll("text").style("fill-opacity", 0); 

     // Transition to the new view. 
     t1.selectAll("text").call(text).style("fill-opacity", 0); 
     t2.selectAll("text").call(text).style("fill-opacity", 1); 
     t1.selectAll("rect").call(rect); 
     t2.selectAll("rect").call(rect); 

     // Remove the old node when the transition is finished. 
     t1.remove().each("end", function() { 
     svg.style("shape-rendering", "crispEdges"); 
     transitioning = false; 
     }); 
    } 

    return g; 
} 

function text(text) { 
    text.attr("x", function(d) { return x(d.x) + 6; }) 
     .attr("y", function(d) { return y(d.y) + 6; }); 
} 

function rect(rect) { 
    rect.attr("x", function(d) { return x(d.x); }) 
     .attr("y", function(d) { return y(d.y); }) 
     .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); }) 
     .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); }) 
     .attr("id", function(d) { return d.name; }); 
} 

function name(d) { 
    return d.parent 
     ? name(d.parent) + "." + d.name 
     : d.name; 
} 
</script> 
</body> 

</html>

來源

2016-04-11 18:49:31 JSBob

好吧，所以我實際上有一個引導容器內的div，這似乎是由於某種原因給它麻煩。我剛剛通過刪除div直到我終於得出這個結論，所以我會接受你的檢查我:) –

D3圖表完美的作品上的jsfiddle但不能在本地主機上

回答

相關問題