Eksen için inline stil strok genişliği, kalın kene etiketleri yapar

Question

Oluşturulan SVG görselleştirme dosyalarını kaydetmek ve işlemek için css kullanmıyorum. Bu, satır içi stilleri kullanmam gerektiği anlamına geliyor. Şimdiye kadar d3'ü kusursuz olarak deneyimledim, büyük ihtimalle yanlış bir şey yaptım.

Kalın eksen çizgileri oluşturmak için {'stroke-width': '3px'} bekliyorum. Ancak cesur eksenli etiketler yapar. Metnin {'font-style': 'normal'} gibi yazı tipi ile ilgili stillerle kontrol edilmesini bekledim.

'Kontur genişliği' özelliğini nasıl kullanıyorum? Bunu hem Chrome hem de Firefox’ta test ettim. Burada

benim kodudur:

<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

Ben explunit cevabı üzerine inşa ettim ve strok genişliğini daha seçici olarak uygularım. İşte sonuçta şununla bittim:

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

Answer 2

eksen işlevlerine

.call size tek seferde tüm bu çizgi ve metin öğeleri oluşturmak için güzel yol vermek, ama sonra geri geliyor engelleyen bir şey yok Oluşturulan şeylerin bireysel parçalarını seç ve daha fazla stil ver. Böyle bir şey:

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