D3軸

2016-09-29 82 views
0

有沒有一種辦法風格d3.js圖表​​軸與JS與此類似:D3軸

svg.append("text") 
    .attr("x",xPos) 
    .attr("y",yPos -3) 
    .attr("font-family", "sans-serif") 
    .attr("font-size", "10px") 
    .attr("font-weight", "bold") 
    .attr("fill", "black") 
    .attr("text-anchor", "middle") 
    .attr("id", "tooltip") 
    .attr("transform", "translate(" + width/2 + ")") 
    .text(d.name +": "+ d.value); 

,而不是使用使用CSS的標準方法。下面是我想用JS

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

.bar { 
    fill: steelblue; 
} 

.x.axis path { 
    display: none; 
} 

回答

3

我一直主張,如果你可以使用CSS樣式刪除和樣式我的軸爲例CSS - 這就是它的設計,但手動是的,你也可以風格的東西,如果你希望。例如,如果您想要設置軸線的樣式,則需要將您添加軸的「容器」或元素(在此例中,我假設爲svg:g),然後執行以下操作:

g.selectAll(".axis line") 
.style("fill", "none") 
.style("stroke", "#000") 
.style("shape-rendering", "crispEdges"); 
}