d3.js에서 X 축 선을 위에서 아래로 변경하는 방법

Question

저는 d3.js를 처음 사용했기 때문에 X 축 선이 맨 위와 아래에 있지 않은 이유를 아직 이해할 수 없습니다. (이미지 벨소리를주십시오).

var data = []; 
var days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; 
for(var i = 0; i<7; i++){ 
    data.push({"letter":i,"frequency":Math.random(), "day":days[i]}) 
} 



var svg = d3.select("#graph1"), 
    margin = {top: 80, right: 20, bottom: 100, left: 100}, 
    width = +svg.attr("width") - margin.left - margin.right, 
    height = +svg.attr("height") - margin.top - margin.bottom; 


var x = d3.scaleLinear().rangeRound([0, width]), 
    y = d3.scaleBand().rangeRound([0, height]); 

var g = svg.append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 


    x.domain([0,1]); 
    y.domain(data.map(function(d) { return d.day; })); 

    g.append("g") 
     .attr("class", "axis axis--x") 
     .attr("transform", "translate(0," + height + ")") 
     .call(d3.axisBottom(x).ticks(5, "%")); 

    g.append("g") 
     .attr("class", "axis axis--y") 
     .call(d3.axisLeft(y)) 
     .append("text") 
     .attr("transform", "rotate(-90)") 
     //.attr("y", 6) 
     //.attr("dy", "0.71em") 
     //.attr("text-anchor", "end"); 



     //setup the tool 

    g.append("g")   
    .attr("class", "grid") 
    /*.attr("transform", "translate("+margin.left+"," + margin.top + ")")*/ 
    .call(d3.axisBottom(x) 
     .ticks(5) 
     .tickSize(height) 
     .tickFormat("") 
     ); 



var thickness = 14; 
g.selectAll(".bar") 
    .data(data) 
    .enter().append("rect") 
    .attr("class", "bar") 
    .attr("x", 0) 
    .attr("y", function(d) { return y(d.day) + thickness/2 ;}) 
    .attr("width", function(d) { return x(d.frequency);}) 
    .attr("height", thickness); 

Answer 1

죄송합니다. 귀하의 질문에 잘못 이해했습니다. 문제는 d3 축이 외부 2 틱과 축선을 연결하는 경로를 자동으로 생성한다는 것입니다. 귀하의 경우에는 그리드를 생성하기 위해 d3 축을 사용했습니다. 나는이 경로가 바닥에서 축선을 덮고 있다고 가정합니다. 이 경우 브라우저의 개발자 도구를 사용하여 DOM을 검사하는 것이 좋습니다.

어쨌든, 문제는 d3 축을 사용하여 그리드를 만드는 대신 각 그리드 라인에 대한 경로를 만들어야한다는 것입니다. 그리드를 만든 방법은 해킹이며, 맨 위에 선이 보이는 이유입니다.

var grid = g.append("g").attr("class","grid"); 
grid.selectAll("path") 
    .data(x.ticks(5)) 
    .enter().append("path") 
    .attr("d", function(d) {return "M"+x(d)+",0v"+height;}); 

빠른 설명이 예를 들어, 틱 값의 배열을 생성

다음의 경우

g.append("g")   
    .attr("class", "grid") 
    .call(d3.axisBottom(x) 
     .ticks(5) 
     .tickSize(height) 
     .tickFormat("")); 

: 그래서 없애 것이다 [0,20,40, ...]

x.ticks(5) 

나머지 코드 각 눈금 값의 .grid 그룹 경로를 부가하고, 그리고 마지막 코드는 같은 경로의 형상을 정의하는

상단에서 시작하여 차트의 맨 아래로 내려가는 수직선.

.attr("d", function(d) {return "M"+x(d)+",0v"+height;}) 

Answer 2

당신에게 상단에있는 라인은 x 축에서 실제로 있는지 위치 : 여기

은 (코드의 양을 줄이기 위해 간체) 내가 사용하는 코드입니다 ? 제게 x 축의 경로가 비활성화되어있는 것처럼 보입니다 (아마도 CSS를 통해 - 많은 사람들이 차트에서 축 경로를 사용하지 않도록 다른 예제에서 붙여 넣은 사본을 복사했을 가능성이 높습니다). 유일한 미스테리는 위 회색 선이 어디에서 오는지입니다 ... 아마도 svg 요소에 대한 CSS 스타일링일까요? 여전히 문제를 해결하는 데 어려움이 있다면 JSFiddle 또는 plunker를 게시하는 것이 유용 할 것입니다.