Le titre et les étiquettes de l'Axe des

J'ai réussi à créer des étiquettes pour les deux axes X et y. J'ai également réussi à ajouter un titre au graphique. Mon problème est que si je modifie les marges de la représentation graphique, l'étiquette positions se foiré.

Extrait de l'endroit où j'ai modifier les marges du graphique:

    var margin = {top: 60, right: 60, bottom: 60, left:120}

Extrait de l'endroit où je créer les étiquettes:

    //Create Title 
    svg.append("text")
    .attr("x", w / 2 )
    .attr("y", 0)
    .style("text-anchor", "middle")
    .text("Title of Diagram");

    //Create X axis label   
    svg.append("text")
    .attr("x", w / 2 )
    .attr("y",  h + margin.bottom)
    .style("text-anchor", "middle")
    .text("State");

    //Create Y axis label
    svg.append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 0-margin.left)
    .attr("x",0 - (h / 2))
    .attr("dy", "1em")
    .style("text-anchor", "middle")
    .text("Revenue");

JsFiddle:
http://jsfiddle.net/u63T9/

Ici est une autre alternative, que je suis prêt à vivre avec:
Je suis fondamentalement en tirant parti de la balance pour trouver un de coordonnées de base. J'ai ensuite ajouter ou de prendre un peu jusqu'à ce que je suis heureux avec l'emplacement. Cette méthode continue d'ailleurs avec les changements dans les marges.

    //Create title 
    svg.append("text")
    .attr("x", w / 2 )
    .attr("y",  yScale(d3.max(input, function(d) { return d.CustomerCount; })) - 20 )
    .style("text-anchor", "middle")
    .text("Title of Graph");

    //Create X axis label   
    svg.append("text")
    .attr("x", w / 2 )
    .attr("y",  yScale(0) + 40 )
    .style("text-anchor", "middle")
    .text("State");

    //Create Y axis label
    svg.append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", xScale(0) - 80 )
    .attr("x",0 - (h / 2))
    .attr("dy", "1em")
    .style("text-anchor", "middle")
    .text("Revenue");
Il n'y a pas vraiment quelque chose que vous pouvez faire à ce sujet à l'exception de calculer l'espace les étiquettes de besoin et assurez-vous que les marges sont au moins aussi grand.
Solution ici d3noob.org/2012/12/adding-axis-labels-to-d3js-graph.html. Vous pouvez télécharger le PDF "D3 trucs et Astuces" pour gratuit ici: leanpub.com/D3-Tips-and-Tricks.

OriginalL'auteur DataByDavid | 2013-01-30

  1. 12

    - Je utiliser une fonction simple pour mesurer texte et ensuite calculer les marges sur cette base.

    //create a dummy element, apply the appropriate classes,
//and then measure the element
function measure(text, classname) {
  if(!text || text.length === 0) return {height: 0, width: 0};

  var container = d3.select('body').append('svg').attr('class', classname);
  container.append('text').attr({x: -1000, y: -1000}).text(text);

  var bbox = container.node().getBBox();
  container.remove();

  return {height: bbox.height, width: bbox.width};
}

    Maintenant, vous pouvez utiliser 

    var titleSize = measure('my title', 'chart title'),
    margin.top = titleSize.height + 20; //add whatever padding you want

    J'ai mis à jour votre exemple à http://jsfiddle.net/uzddx/2/. Vous pouvez voir le haut de la marge redimensionne lorsque vous modifiez la taille de la police du titre. Vous pourriez faire quelque chose de similaire pour la marge de gauche, de sorte que votre étiquette n'est pas si loin de l'axe des y.

    Merci Bill, mais je suis nouveau sur D3 et je ne pouvais pas complètement suivez votre solution.
    Cela n'a rien à voir avec D3, je suis juste en utilisant getBBox en SVG à mesure du texte. Une fois que vous avez la hauteur de la chaîne de texte, vous pouvez modifier vos marges, afin qu'ils correspondent correctement. En d'autres termes, ne pas coder en dur vos marges, de mesurer les étiquettes et vos marges en fonction de leur taille.
    J'ai mis à jour votre exemple et de l'ajouter à ma réponse.
    J'ai essayé avec d3 et a constaté de problème sur l'installation de jsdom et ensuite de steveworkman.com/node-js/2012/installing-jsdom-on-windows, mais toujours dur de la chance. Au lieu de cela, il est github.com/cheeriojs/cheerio .c'est l'alternative à jsdom. Donc, une façon de travailler avec cherrio,d3,d3-mesure-texte. Mon but ultime est d'atteindre le texte-les dimensions que nous sommes sur le graphisme.Measurestring en c#. Veuillez noter que npm-toile n'est pas une option, car elle nécessite chiro et dur avec windows opus. Pls me sauver. J'ai déjà pris beaucoup de temps.

    OriginalL'auteur Bill