chiều rộng đột quỵ kiểu nội tuyến cho trục tạo nhãn đánh dấu in đậm

Question

Tôi không sử dụng css vì tôi muốn lưu và xử lý tệp hình ảnh SVG đã tạo. Điều này có nghĩa là tôi cần sử dụng kiểu nội tuyến. Cho đến nay tôi đã trải qua d3 là hoàn hảo nên rất có thể tôi đã làm điều gì đó sai trái.

Tôi đang mong đợi {'stroke-width': '3px'} để tạo các đường trục dày. Nhưng nó làm cho nhãn trục đậm. Tôi dự kiến ​​văn bản sẽ được kiểm soát với các kiểu phông chữ có liên quan như {font-style ':' normal '}.

Có gì sai với cách tôi sử dụng 'chiều rộng đột quỵ'? Tôi đã thử nghiệm điều này trong cả Chrome và Firefox.

đây là mã của tôi:

<script> 
    var margin = {top: 20, right: 10, bottom: 20, left: 40}; 
    var width = 960 - margin.left - margin.right; 
    var height = 100 - margin.top - margin.bottom; 

    var x = d3.scale.linear().range([0, width]); 
    var y = d3.scale.linear().range([0, height]); 
    var xAxis = d3.svg.axis().scale(x).orient("bottom"); 
      // .tickFormat(d3.time.format("%H:%M")); 
    var yAxis = d3.svg.axis().scale(y).orient("left").ticks(height/10); 

    var svg = d3.select("svg"); 
    var vis = svg.append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
     .style({'font-size': '10px', 'font-family': 'sans-serif', 
      'font-style': 'normal', 'font-variant': 'normal', 
      'font-weight': 'normal'}); 

    var redraw = function(selection, data, style) { 
     selection.selectAll(".bar") 
      .data(data) 
      .enter().append("rect") 
      .attr('class', "bar") 
      .attr("x", function(d) { return x(d[0]) - .5; }) 
      .attr("y", function(d) { return y(d[1]); }) 
      .attr("width", 5) 
      .attr("height", function(d) { return height - y(d[1]); }) 
      .style(style); 

     vis.select(".x.axis").call(xAxis); 
     vis.select(".y.axis").call(yAxis); 
    }; 

    svg.attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom); 

    vis.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .style({ 'stroke': 'Black', 'fill': 'none', 'stroke-width': '3px'}) 
     .call(xAxis); 

    vis.append("g") 
     .attr("class", "y axis") 
     .style({ 'stroke': 'Black', 'fill': 'none', 'stroke-width': '3px'}) 
     .call(yAxis); 

    // now we draw the first barchart (we do not know about the 2nd one yet) 
    var data1 = [[2,0.5], [4,0.8], [6,0.6], [8,0.7], [12,0.8]]; 
    x.domain([0, 13]); 
    y.domain([0.9, 0]); 

    vis.append("g") 
     .attr("class", "bar1"); 

    vis.select(".bar1") 
     .call(redraw, data1, {'fill': 'Red', 'stroke': 'Black'}); 
</script> 

Answer 1

Tôi xây dựng trên câu trả lời của explunit và áp dụng chiều rộng đột quỵ chọn lọc hơn. Dưới đây là những gì tôi đã kết thúc với:

vis.selectAll('.axis line, .axis path') 
    .style({'stroke': 'Black', 'fill': 'none', 'stroke-width': '3px'}); 

Answer 2

Các .call đến các chức năng trục cung cấp cho bạn một cách tốt đẹp để tạo ra tất cả những yếu tố dòng và văn bản trong một đi, nhưng không có gì để ngăn chặn bạn từ sau đó trở lại là chọn từng phần riêng lẻ của những gì đã được tạo ra và cho nó thêm phong cách. Một cái gì đó như thế này:

var yAxisNodes = vis.append("g") 
    .attr("class", "y axis") 
    .style({ 'stroke': 'Black', 'fill': 'none', 'stroke-width': '3px'}) 
    .call(yAxis); 
yAxisNodes.selectAll('text').style({ 'stroke-width': '1px'});