Inline-Stil stroke-width für Achse macht fette Tick-Markierungen

Question

Ich verwende kein CSS, da ich die erstellten SVG-Visualisierungsdateien speichern und verarbeiten möchte. Das bedeutet, dass ich Inline-Styles verwenden muss. Bisher habe ich d3 als fehlerfrei erlebt, daher habe ich wahrscheinlich etwas falsch gemacht.

Ich erwarte, dass {'stroke-width': '3px'} dicke Achsenlinien erzeugt. Stattdessen werden jedoch fette Achsenbeschriftungen erstellt. Ich habe erwartet, dass der Text mit fontbezogenen Stilen wie {'font-style': 'normal'} gesteuert wird.

Was mache ich falsch bei der Verwendung von 'stroke-width'? Ich habe dies sowohl in Chrome als auch in Firefox getestet.

Hier ist mein Code:

    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': 'Schwarz', 'fill': 'keine', 'stroke-width': '3px'})
      .call(xAxis);

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

    // Jetzt zeichnen wir das erste Balkendiagramm (über das zweite wissen wir noch nichts)
    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': 'Rot', 'stroke': 'Schwarz'});

Answer 1

Ich habe die Antwort von explunit erweitert und die Strichstärke selektiver angewendet. Hier ist, was ich am Ende erreicht habe:

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

Answer 2

Der .Aufruf der Achsenfunktionen bietet Ihnen eine schöne Möglichkeit, all diese Linien- und Textelemente auf einen Schlag zu erstellen, aber nichts hindert Sie daran, dann zurückzukommen, um einzelne Teile dessen, was erstellt wurde, auszuwählen und es weiter zu gestalten. Etwas in der Art:

var yAxisNodes = vis.append("g")
  .attr("class", "y axis")
  .style({ 'stroke': 'Schwarz', 'füllen': 'keins', 'Strichstärke': '3px'})
  .call(yAxis);
yAxisNodes.selectAll('text').style({ 'Strichstärke': '1px'});