Horizontale Balkenanzeige Balkenbeschriftungen in D3

Ich versuche, Balkenbeschriftungen für ein horizontales Balkendiagramm anzuzeigen, aber sie werden nicht am Rand der Leiste angezeigt und stattdessen oben auf der Leiste angezeigt. Ich denke, es gibt ein Problem mit dem Teil "// horizontale Balkenbeschriftungen" meines Codes. Der Code ist unten und Ich habe auch Bilder von Plan gemacht und das Diagramm ich es aussehen soll:Horizontale Balkenanzeige Balkenbeschriftungen in D3

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Housing Tenure of DC Residents</title> 

<style type="text/css"> 

    .axis text{ 
    font-family: Arial; 
    font-size: 13px; 
    color: #333333; 
    text-anchor: end; 
    } 

    .axis path { 
    fill:none; 
    stroke:#333333 ; 
    stroke-width: 1.5px; 
    shape-rendering: crispEdges 
font-family: Arial; 
    } 


    .bar{ 
    stroke: none; 
    fill: #037FAA; 

    } 
    .axis .label{ 
    font-family: Arial; 
    font-size:13px; 
    color: #333333; 
    text-anchor: middle; 

    } 
    .textlabel{ 
    font-family: Arial; 
    font-size:13px; 
    color: #333333; 
    text-anchor: left; 
    } 

    } 

    </style> 
    </head> 
    <body> 

    <script type="text/javascript" src="d3/d3.js"></script> 
    <script> 

    var outerWidth = 475; 
    var outerHeight = 350; 
    var margin = { left: 75, top: 20, right: 0, bottom: 60 }; 
    var padding = 100; 



    var barPadding = 0.2; 
    var barPaddingOuter = 0.1; 
    var xColumn = "Percentage"; 
    var yColumn = "LabelD3"; 

    var xAxisLabelOffset = 75; 


    var innerWidth = outerWidth - margin.left - margin.right; 
    var innerHeight = outerHeight - margin.top - margin.bottom; 


    var svg = d3.select("body").append("svg") 
    .attr("width", outerWidth) 
    .attr("height", outerHeight) 
    .attr("viewBox", "0 0 " + outerWidth + " " + outerHeight); 


    var g = svg.append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 


    var xAxisG = g.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + innerHeight + ")") 



    var yAxisG = g.append("g") 
    .attr("class", "y axis"); 


    var xScale = d3.scale.linear() 
    .range([0, innerWidth - margin.right - margin.left], .1); 


    var yScale = d3.scale.ordinal() 
    .rangeRoundBands([innerHeight , 0], barPadding, barPaddingOuter); 


    var xAxis = d3.svg.axis().scale(xScale).orient("bottom") 
    .ticks(7) 
    .tickFormat(function(d) {return d + "%"}); 


    var yAxis = d3.svg.axis().scale(yScale).orient("left") 
    .outerTickSize(0); 


    function render(data){ 
    xScale.domain([0, d3.max(data, function (d){ return d[xColumn]; })]); 
    yScale.domain(  data.map(function (d){ return d[yColumn]; })); 
    xAxisG.call(xAxis); 
    yAxisG.call(yAxis); 


    var bars = g.selectAll("rect").data(data); 
    bars.enter().append("rect") 
     .attr("height", yScale.rangeBand()); 
    bars 
     .attr("x", 0) 
     .attr("class", "bar") 
     .attr("y",  function (d){ return yScale(d[yColumn]); }) 
     .attr("width", function (d){ return xScale(d[xColumn]); }); 


    // horizontal bar labels 
    svg.append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
    .selectAll(".textlabel") 
    .data(data) 
    .enter() 
    .append("text") 
.attr("class", "textlabel") 
.style("font-family", "Arial") 
.attr("x", function(d){ return xScale(d["Percentage"]) + (xScale.range()/2); }) 
.attr("y", function(d){ return yScale(d["LabelD3"]) - 3; }) 
.text(function(d){ return (d["Percentage"] + "%"); }); 


// X-axis labels 
svg.append("text") 
.attr("text-anchor", "middle") 
.style("font-size", "13px") 
.style("color", "#333333") 
.attr("transform", "translate("+ (outerWidth/2) + "," +(outerHeight-(padding/4)) + ")") 
.text("% of Households") 
.style("font-family", "Arial"); 

//title for the chart 

svg.append("text") 
.attr("text-anchor", "middle") 
.style("font-size", "16px") 
.style("color", "#333333") 
.attr("transform", "translate("+ (outerWidth/3.78) + "," +(outerHeight/30) + ")") 
.text("Housing Tenure of DC Residents") 
.style("font-family", "Arial"); 

//source 

svg.append("text") 
.attr("text-anchor", "middle") 
.style("font-size", "13px") 
.style("color", "#333333") 
.attr("transform", "translate("+ (outerWidth/3.2) + "," +(outerHeight/1) + ")") 
.text("Source: US Census ACS 5-year 2010-2014") 
.style("font-family", "Arial") 


svg.append("text") 
.attr("text-anchor", "left") 
.style("font-size", "10x") 
.style("color", "#333333") 
.attr("transform", "translate("+ (outerWidth/28) + "," +(outerHeight/12) + ")") 
.text("2014") 
.style("font-family", "Arial") 



    bars.exit().remove(); 
    } 
    function type(d){ 
    d.population = +d.population; 
    return d; 
    } 
    d3.csv("Housing.csv", type, render); 
    </script> 
    </body> 
</html>

Percentage,LabelD3 
41.6,Own home 
58.6,Rent home

Quelle

2016-04-08 dedpo

können Sie auch Ihre Housing.csv liefern, wenn die Datei groß sein können Sie Github Logen und aus in der Verbindung nutzen können. – Cyril

@Cyril hinzugefügt die CSV in den Bearbeitungen – dedpo

Statt dies zu tun, für die horizontale Bar-Etiketten

.attr("x", function(d){ return xScale(d["Percentage"]) + (xScale.range()/2); })

tun dies

.attr("x", function(d){ return xScale(parseFloat(d["Percentage"])) ; }) 
.attr("y", function(d){ return yScale(d["LabelD3"]) + yScale.rangeBand()/2; })

Code arbeiten here

Quelle

2016-04-08 02:42:22 Cyril

Es funktioniert !! Vielen Dank für deine Hilfe :) – dedpo

Horizontale Balkenanzeige Balkenbeschriftungen in D3

Antwort

Verwandte Themen