d3.js - décalage de l'axe des y sur un graphique en graphe empilé

J'ai aussi posté cette question sur le Groupe Google https://groups.google.com/forum/?fromgroups#!topic/d3-js/DYiVeC544wsmais vu qu'il préfère que l'aide des questions sont posées ici. Je suis juste d'avoir du mal à faire passer l'axe des y à la gauche de mon graphique de manière à ne pas obtenir de la manière de la première colonne. J'ai fourni une image sur le groupe google afin que vous puissiez voir de quoi je parle.

Le code pour créer l'axe est comme suit:

   var MARGINS = {top: 20, right: 20, bottom: 20, left: 60}; //margins around the graph
var xRange = d3.scale.linear().range([MARGINS.left, width - MARGINS.right]), //x range function
    yRange = d3.scale.linear().range([height - MARGINS.top, MARGINS.bottom]), //y range function

    xAxis = d3.svg.axis().scale(xRange).tickSize(16).tickSubdivide(true), //x axis function
    yAxis = d3.svg.axis().scale(yRange).tickSize(10).orient("right").tickSubdivide(true); //y axis function


//create the visualization chart
var vis = d3.select("#chart")
   .append("svg")
    .attr("width", width)
    .attr("height", height + margin);


    //add in the x axis
  vis.append("svg:g") //container element
    .attr("class", "x axis") //so we can style it with CSS
    .attr("transform", "translate(0," + height + ")") //move into position
   //.call(xAxis); //add to the visualisation

  //add in the y axis
  vis.append("svg:g") //container element
    .attr("class", "y axis") //so we can style it with CSS
    .call(yAxis); //add to the visualisation

source d'informationauteur Apollo

  1. 24

    Utiliser le l'attribut transform de décalage de l'axe y, comme vous l'avez fait pour l'axe des abscisses. Par exemple:

    svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + width + ",0)")
    .call(yAxis);

    Ce n'est nécessaire que lors de l'utilisation de droit de l'orientation. Lorsque l'axe est orienté vers la gauche, le positionnement par défaut est en général bien.

    Aussi, je vous recommande d'utiliser la convention suivante pour les marges:

    • Définir l'origine de l'élément SVG pour le coin en haut à gauche de l'intérieur de la zone de graphique.
    • Définir width et height comme l'intérieur de la largeur et de la hauteur.

    Par exemple:

    var margin = {top: 20, right: 10, bottom: 20, left: 10},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    Si vous préférez, vous pouvez également stocker l'intérieur et l'extérieur dimensions, par exemple,

    var outerWidth = 960,
    outerHeight = 500,
    innerWidth = outerWidth - margin.left - margin.right,
    innerHeight = outerHeight - margin.top - margin.bottom;

    Voici une explication visuelle de la convention: