stile in linea stroke-width per l'asse rende tick grassetto etichette

Question

Non faccio uso di CSS in quanto voglio salvare ed elaborare i file di visualizzazione SVG creati. Ciò significa che ho bisogno di usare gli stili in linea. Finora ho sperimentato la d3 come impeccabile quindi molto probabilmente ho fatto qualcosa di sbagliato.

Mi aspetto { 'stroke-width': '3px'} per fare linee degli assi di spessore. Ma rende audaci le etichette degli assi. Mi aspettavo che il testo fosse controllato con stili relativi ai font come {'font-style': 'normal'}.

Cosa c'è di sbagliato con il modo che uso 'stroke-width'? Ho provato questo in Chrome e Firefox.

Ecco il mio codice:

<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

ho costruito sulla risposta di explunit e applicato il tratto di larghezza in modo più selettivo. Ecco quello che ho finito con:

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

Answer 2

La .call alle funzioni degli assi si invia un bel modo per creare tutti quegli elementi di linea e di testo in una sola volta, ma non c'è niente che impedisca di poi tornare a seleziona i singoli pezzi di ciò che è stato creato e dagli un tocco di stile. Qualcosa di simile a questo:

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'});