D3 JSチャートがX軸とY軸のラベルを追加した後に切り捨てられます

Question

XとY軸にテキストラベルを貼り付けた後、D3の散布図を下のコードで作成し、右の円のテキストラベルを切り取ります。ここで

は作業jsFiddleです：XとY軸のラベルを追加する

https://jsfiddle.net/chemok78/1vcat0s8/4/

は、それが含むdiv要素のうちのビットを移動しながら、右へとアップ全体のグラフを移動するようです。誰でも私にこの問題を解決する手助けをすることができますか？

var url = "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json"; 
d3.json(url, function(json) { 

    var data = json; 

    var margin = { 
    top: 40, 
    right: 100, 
    bottom: 80, 
    left: 80 
    }; 
    var w = 1000 - margin.left - margin.right; 
    var h = 800 - margin.top - margin.bottom; 

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

    var maxRank = d3.max(data, function(d) { 

    return d.Place; 

    }); 

    var minSeconds = d3.min(data, function(d) { 

    return d.Seconds; 

    }); 

    var maxSeconds = d3.max(data, function(d) { 

    return d.Seconds; 

    }); 


    var formatTime = d3.time.format("%M:%S"); 
    var formatSeconds = formatMinutes = function(d) { 
    return formatTime(new Date(2016, 0, 0, 0, 1, d)); 
    }; 

    var xScale = d3.scale.linear() 
    .domain([maxSeconds + 5, minSeconds]) 
    .range([0, w]); 

    var yScale = d3.scale.linear() 
    .domain([0, maxRank + 2]) 
    .range([0, h]); 

Answer 1

これは「グラフの移動」とは関係ありません。ここに問題があります。

あなたが行う場合は、この：あなたはすでにあなたのSVGに存在するテキスト要素を選択している

var labels = svg.selectAll("text") 

。そのため、あなたの "入力"選択は、含まれるべきものと比較して、より少ない要素しか持たないでしょう。

解決策は単純です：、

var labels = svg.selectAll("foo") 

か、あるいはコードの下に軸のラベルを付加ブロックを移動：存在しないものを選択します。

ここにあなたの更新されたフィドルです：https://jsfiddle.net/mp7LxsL4/