沒有CSS的d3.js中的軸文本樣式

我想控制d3.js的樣式完全使用JS的散點圖矩陣圖不使用CSS。我知道它的效率有點低，但我呈現的不止一張圖表，它們都有不同的風格。有人能告訴我我在這裏做錯了什麼，因爲我的軸文字已經消失了。沒有CSS的d3.js中的軸文本樣式

JS斌：

https://jsbin.com/siqewicizu/edit?js,output

代碼以供參考：

var width = 960, 
    size = 230, 
    padding = 20; 

var x = d3.scale.linear() 
    .range([padding/2, size - padding/2]); 

var y = d3.scale.linear() 
    .range([size - padding/2, padding/2]); 

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

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

var color = d3.scale.category10(); 

var domainByTrait = {}, 
    traits = d3.keys(data[0]).filter(function(d) { return d !== "species"; }), 
    n = traits.length; 

traits.forEach(function(trait) { 
    domainByTrait[trait] = d3.extent(data, function(d) { return d[trait]; }); 
}); 

xAxis.tickSize(size * n); 
yAxis.tickSize(-size * n); 

var svg = d3.select("body").append("svg") 
    .attr("width", size * n + padding) 
    .attr("height", size * n + padding) 
    .append("g") 
    .attr("transform", "translate(" + padding + "," + padding/2 + ")"); 

svg.selectAll(".x.axis") 
    .data(traits) 
    .enter().append("g") 
    .attr("class", "xAxis") 
    .attr("transform", function(d, i) { return "translate(" + (n - i - 1) * size + ",0)"; }) 
    .each(function(d) { x.domain(domainByTrait[d]); d3.select(this).call(xAxis); }); 

svg.selectAll(".y.axis") 
    .data(traits) 
    .enter().append("g") 
    .attr("class", "yAxis") 
    .attr("transform", function(d, i) { return "translate(0," + i * size + ")"; }) 
    .each(function(d) { y.domain(domainByTrait[d]); d3.select(this).call(yAxis); }); 

svg.selectAll(".xAxis") 
    .style("fill", "none"); 

svg.selectAll(".yAxis") 
    .style("fill", "none") 

svg.selectAll("line") 
    .style("stroke", "#ddd") 
    .style("shape-rendering", "crispEdges"); 

var cell = svg.selectAll(".cell") 
    .data(cross(traits, traits)) 
    .enter().append("g") 
    .attr("transform", function(d) { return "translate(" + (n - d.i - 1) * size + "," + d.j * size + ")"; }) 
    .each(plot); 

// Titles for the diagonal. 
cell.filter(function(d) { return d.i === d.j; }).append("text") 
    .attr("x", padding) 
    .attr("y", padding) 
    .attr("dy", ".71em") 
    .style("font-weight", "bold") 
    .style("text-transform", "capitalize") 
    .style("font-family", "arial") 
    .style("font-size", "10px") 
    .text(function(d) { return d.x; }); 

function plot(p) { 
    var cell = d3.select(this); 

    x.domain(domainByTrait[p.x]); 
    y.domain(domainByTrait[p.y]); 

    cell.append("rect") 
     .style("fill", "none") 
     .style("stroke", "#aaa") 
     .style("shape-rendering", "crispEdges") 
     .attr("x", padding/2) 
     .attr("y", padding/2) 
     .attr("width", size - padding) 
     .attr("height", size - padding); 

    cell.selectAll("circle") 
     .data(data) 
     .enter().append("circle") 
     .attr("cx", function(d) { return x(d[p.x]); }) 
     .attr("cy", function(d) { return y(d[p.y]); }) 
     .attr("r", 4) 
     .style("fill-opacity", "0.7") 
     .style("fill", function(d) { return color(d.species); }); 
} 

function cross(a, b) { 
    var c = [], n = a.length, m = b.length, i, j; 
    for (i = -1; ++i < n;) for (j = -1; ++j < m;) c.push({x: a[i], i: i, y: b[j], j: j}); 
    return c; 
}

來源

2016-10-03 konrad

你的軸文本存在，但你已經設置填充到none這是它沒有被顯示爲母這是繼承。您可以添加下面這樣你的兩個fill: none聲明：

svg.selectAll(".xAxis text") .style("fill", "#000"); svg.selectAll(".yAxis text") .style("fill", "#000");

，結果是黑軸標籤，你可以在這裏看到： https://jsfiddle.net/MaryBartlett/jc4mp14s/

來源

2016-10-03 15:53:57 Mary

沒有CSS的d3.js中的軸文本樣式

回答

相關問題