Grafik von Plunker auf Webseite anzeigen

Ich verwende d3.js, um ein interaktives Balkendiagramm zu erstellen. Ich habe den Graphen gut geschrieben, aber ich kann nicht herausfinden, wie ich den Graphen auf die Webseite herunterladen soll, auf die ich ihn setzen möchte. Here's the plunkr Grafik von Plunker auf Webseite anzeigen

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

.bar { 
    fill: #C50707 
} 

.bar:hover { 
    fill: #FF7171; 
} 

.title { 
    font: bold 14px "Helvetica Neue", Helvetica, Arial, sans-serif; 
} 

.axis { 
    font: 10px sans-serif; 
} 

.axis path, 
.axis line { 
    fill: none; 
    stroke: #000; 
    shape-rendering: crispEdges; 
} 

.x.axis path { 
    display: none; 
} 

</style> 
<body> 
<script src="//d3js.org/d3.v3.min.js"></script> 
<script> 

var margin = {top: 80, right: 180, bottom: 80, left: 180}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

var x = d3.scale.ordinal() 
    .rangeRoundBands([0, width], .1, .3); 

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

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom"); 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left") 
    .ticks(20, 260); 

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

d3.tsv("data.tsv", type, function(error, data) { 
    x.domain(data.map(function(d) { return d.name; })); 
    y.domain([0, d3.max(data, function(d) { return d.value; })]); 

    svg.append("text") 
     .attr("class", "title") 
     .attr("x", x(data[0].name)) 
     .attr("y", -26) 
     .text("Office Supply Stores in Pennsylvania 2010-2015"); 

    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis) 
    .selectAll(".tick text") 
     .call(wrap, x.rangeBand()); 

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis); 

    svg.selectAll(".bar") 
     .data(data) 
    .enter().append("rect") 
     .attr("class", "bar") 
     .attr("x", function(d) { return x(d.name); }) 
     .attr("width", x.rangeBand()) 
     .attr("y", function(d) { return y(d.value); }) 
     .attr("height", function(d) { return height - y(d.value); }); 
}); 

function wrap(text, width) { 
    text.each(function() { 
    var text = d3.select(this), 
     words = text.text().split(/\s+/).reverse(), 
     word, 
     line = [], 
     lineNumber = 0, 
     lineHeight = 1.1, // ems 
     y = text.attr("y"), 
     dy = parseFloat(text.attr("dy")), 
     tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em"); 
    while (word = words.pop()) { 
     line.push(word); 
     tspan.text(line.join(" ")); 
     if (tspan.node().getComputedTextLength() > width) { 
     line.pop(); 
     tspan.text(line.join(" ")); 
     line = [word]; 
     tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word); 
     } 
    } 
    }); 
} 

function type(d) { 
    d.value = +d.value; 
    return d; 
} 

</script>

Quelle

2016-07-26 Mzan

was meinen Sie die Homepage? –

Ich habe versucht, ein Diagramm zu erstellen, um die Website meiner Arbeit zu setzen. Ich habe das Diagramm ohne Probleme erstellt, aber jetzt bin ich verwirrt, was ich als nächstes tun soll. – Mzan

Gerade hinzugefügt eine Antwort unten, lesen und markieren als Antwort, wenn es hilft. Fühlen Sie sich frei zu fragen, ob Sie immer noch ein Problem haben, indem Sie das genaue Problem erwähnen. Auf der anderen Seite ist dies nur eine einfache Sache, ich bevorzuge einige kurze Kurse oder Tutorials über das Internet zum besseren Verständnis. Stellen Sie hier in Zukunft exakte Fragen und berücksichtigen Sie dabei die Frage-Frage-Richtlinien (http://stackoverflow.com/help/how-to-ask). – adi

Wenn Sie suchen den genannten Code zu einem Projekt zu kopieren, dann ist dies ganz einfach. Siehe die updated plunkr, wo ich das gesamte Javascript und Styling zu separaten Dateien namens style.css und script.js hinzugefügt habe. Alles, was Sie tun müssen, ist diese Dateien oder den Inhalt dieser Dateien in Ihre Projektdateien zu kopieren. Muss diese Dateien wie ich in Ihre HTML-Datei aufnehmen.

HTML

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <script src="//d3js.org/d3.v3.min.js"></script> 
     <script src="script.js"></script> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 
    <body> 
     <!-- Html body here --> 
    </body> 
</html>

script.js

var margin = {top: 80, right: 180, bottom: 80, left: 180}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

var x = d3.scale.ordinal() 
    .rangeRoundBands([0, width], .1, .3); 

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

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom"); 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left") 
    .ticks(20, 260); 

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

d3.tsv("data.tsv", type, function(error, data) { 
    x.domain(data.map(function(d) { return d.name; })); 
    y.domain([0, d3.max(data, function(d) { return d.value; })]); 

    svg.append("text") 
     .attr("class", "title") 
     .attr("x", x(data[0].name)) 
     .attr("y", -26) 
     .text("Office Supply Stores in Pennsylvania 2010-2015"); 

    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis) 
    .selectAll(".tick text") 
     .call(wrap, x.rangeBand()); 

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis); 

    svg.selectAll(".bar") 
     .data(data) 
    .enter().append("rect") 
     .attr("class", "bar") 
     .attr("x", function(d) { return x(d.name); }) 
     .attr("width", x.rangeBand()) 
     .attr("y", function(d) { return y(d.value); }) 
     .attr("height", function(d) { return height - y(d.value); }); 
}); 

function wrap(text, width) { 
    text.each(function() { 
    var text = d3.select(this), 
     words = text.text().split(/\s+/).reverse(), 
     word, 
     line = [], 
     lineNumber = 0, 
     lineHeight = 1.1, // ems 
     y = text.attr("y"), 
     dy = parseFloat(text.attr("dy")), 
     tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em"); 
    while (word = words.pop()) { 
     line.push(word); 
     tspan.text(line.join(" ")); 
     if (tspan.node().getComputedTextLength() > width) { 
     line.pop(); 
     tspan.text(line.join(" ")); 
     line = [word]; 
     tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word); 
     } 
    } 
    }); 
} 

function type(d) { 
    d.value = +d.value; 
    return d; 
}

style.css

.bar { 
    fill: #C50707 
} 

.bar:hover { 
    fill: #FF7171; 
} 

.title { 
    font: bold 14px "Helvetica Neue", Helvetica, Arial, sans-serif; 
} 

.axis { 
    font: 10px sans-serif; 
} 

.axis path, 
.axis line { 
    fill: none; 
    stroke: #000; 
    shape-rendering: crispEdges; 
} 

.x.axis path { 
    display: none; 
}

Quelle

2016-08-01 08:22:09 adi

Antwort

Verwandte Themen