largeur de trait de style en ligne pour l'axe rend les étiquettes de tick en gras

Je n'utilise pas de css car je veux le sauver et le processus de la création SVG visualisation des fichiers. Cela signifie que je dois utiliser des styles en ligne. Jusqu'à présent j'ai vécu d3, impeccable donc plus probable que j'ai fait quelque chose de mal.

Je suis dans l'attente d' {'stroke-width': '3px'} pour épaisseur des lignes d'axe. Mais il rend gras étiquettes de l'axe. J'attendais le texte pour être contrôlé par la police liés à des styles comme {'font-style': 'normal'}.

Quoi de mal avec la façon dont j'utilise "stroke-width'? J'ai testé cela dans Chrome et Firefox.

voici mon code:

<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>

source d'informationauteur mark

  1. 20

    J'ai construit sur la réponse de explunit et appliqué la largeur du trait de façon plus sélective. Voici ce que j'ai:

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

    La .call à l'axe des fonctions vous donner une belle façon de créer tous les éléments de texte et d'un seul coup, mais il n'y a rien pour vous empêcher de revenir pour sélectionner les différentes pièces de ce qui a été créé et lui donner plus de style. Quelque chose comme ceci:

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