D3軸中的轉換

我試圖創建一個可以包含轉換的分組條形圖。我引用Mike Bostock的分組條形圖示例，並使條形圖轉換工作，但無法讓軸轉換。我在這個例子中指的是州標籤。D3軸中的轉換

我試過下面的另一個例子，但我很困惑，爲什麼我能使它工作。對於我的示例代碼的轉換髮生在SVG

分組條形圖參考Example

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

body { 
    font: 10px sans-serif; 
} 

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

.bar { 
    fill: steelblue; 
} 

.x_axis path { 
    display: none; 
} 

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

//Update the flips bars but not the axis 
function update() { 
    var data_update = data.reverse() 

    x0.domain[data_update] 

     svg.selectAll(".state") 
     .data(data_update) 
     .transition() 
     .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; }); 

     svg.select(".x_axis") 
     .transition() 
     .call(xAxis); 
    } 

d3.select("svg") 
    .on("click", update) 

//The rest of the code 
var data 

var margin = {top: 20, right: 20, bottom: 30, left: 40}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

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

var x1 = d3.scale.ordinal(); 

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

var color = d3.scale.ordinal() 
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); 

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

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.csv("data.csv", function(error, csv) { 
    data = csv 
    var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "State"; }); 

    data.forEach(function(d) { 
    d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; }); 
    }); 

    x0.domain(data.map(function(d) { return d.State; })); 
    x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]); 
    y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]); 

    svg.append("g") 
     .attr("class", "x_axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 


    var state = svg.selectAll(".state") 
     .data(data) 
    .enter().append("g") 
     .attr("class", "state") 
     .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; }); 


    state.selectAll("rect") 
     .data(function(d) { return d.ages; }) 
    .enter().append("rect") 
     .attr("width", x1.rangeBand()) 
     .attr("x", function(d) { return x1(d.name); }) 
     .attr("y", function(d) { return y(d.value); }) 
     .attr("height", function(d) { return height - y(d.value); }) 
     .style("fill", function(d) { return color(d.name); }); 

}); 

</script>

來源

2015-04-05 canyon289

你的問題不是很清楚。你想要轉換的究竟是什麼？另外，你提供的要點是404'd。 – Ashitaka 2015-04-05 10:54:51

我是一個虛擬的和計算出來的點擊。

在對象數組上調用.domain方法沒用。我忘了對象數組地圖，讓美國的

x0.domain(data_update.map(function(d) { return d.State; }))

完整的代碼下面的值對於那些好奇

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

body { 
    font: 10px sans-serif; 
} 

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

.bar { 
    fill: steelblue; 
} 

.x_axis path { 
    display: none; 
} 

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

var data 

var margin = {top: 20, right: 20, bottom: 30, left: 40}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

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

var x1 = d3.scale.ordinal(); 

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

var color = d3.scale.ordinal() 
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); 

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

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left") 
    .tickFormat(d3.format(".2s")); 

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.csv("data.csv", function(error, csv) { 
    data = csv 
    var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "State"; }); 

    data.forEach(function(d) { 
    d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; }); 
    }); 

    x0.domain(data.map(function(d) { return d.State; })); 
    x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]); 
    y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]); 

    svg.append("g") 
     .attr("class", "x_axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
    .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("Population"); 

    var state = svg.selectAll(".state") 
     .data(data, function(d) {return d.State}) 
    .enter().append("g") 
     .attr("class", "state") 
     .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; }); 


    state.selectAll("rect") 
     .data(function(d) { return d.ages; }) 
    .enter().append("rect") 
     .attr("width", x1.rangeBand()) 
     .attr("x", function(d) { return x1(d.name); }) 
     .attr("y", function(d) { return y(d.value); }) 
     .attr("height", function(d) { return height - y(d.value); }) 
     .style("fill", function(d) { return color(d.name); }); 

    var legend = svg.selectAll(".legend") 
     .data(ageNames.slice().reverse()) 
    .enter().append("g") 
     .attr("class", "legend") 
     .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); 

    legend.append("rect") 
     .attr("x", width - 18) 
     .attr("width", 18) 
     .attr("height", 18) 
     .style("fill", color); 

    legend.append("text") 
     .attr("x", width - 24) 
     .attr("y", 9) 
     .attr("dy", ".35em") 
     .style("text-anchor", "end") 
     .text(function(d) { return d; }); 

}); 

//Update the flips bars 
function update() { 

    data.reverse() 
    x0.domain(data.map(function(d) { return d.State; })) 

     svg.selectAll(".state") 
     .data(data, function(d) {return d.State}) 
     .transition() 
     .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; }); 

     svg.select(".x_axis") 
     .transition() 
     .call(xAxis); 
    } 

d3.select("svg") 
    .on("click", update) 



</script>

來源

2015-04-05 14:55:48 canyon289

D3軸中的轉換

回答

相關問題