D3.js: 이미지(데이터에 지정된 파일 이름 포함)를 축의 틱 값으로 사용

D3.js: 이미지(데이터에 지정된 파일 이름 포함)를 축의 틱 값으로 사용

현재 다음과 같은 데이터가 있습니다.

var dataset = [
{
 "bank": "Bank 1",
 "img": "Picture1.png"
},
{
 "bank": "Bank 2",
 "img": "Picture2.png"
},                  
{
 "bank": "Bank 3",
 "img": "Picture3.png"
}
];

복잡한 실제 데이터죠?물론입니다. 현재 D3.js 코드와 함께 축에 틱 값으로 "뱅크"가 있습니다.

var w = 1000;
var h = 700;
var padding = 30;
var wpadding = 120;
var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h+padding);

var yScale = d3.scale.ordinal()
                .domain(dataset.map(function (d) { return d.bank; }))
                .rangeRoundBands([0, h], 0.55);

var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left");

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

어쨌든, 제가 무슨 말을 하는지 아시겠죠?이제 축의 눈금 값이 은행 값뿐만 아니라 데이터 집합의 img 값을 참조하도록 하려고 합니다.

처음에는 축을 사용하는 경우인 줄 알았어요.JSON 데이터의 img 값을 참조하는 익명 함수가 있는 tickValues([values])가 있지만 작동하지 않습니다.아니면 내가 끔찍하게 잘못하고 있는 거야

그리고 나는 그것이 사용 사례라고 생각했다:

 var imgs = svg.selectAll("img").data([dataset]);

하지만 이 방법에 대한 나의 우려는 이것이 적절한 눈금 값처럼 축에 제대로 결합되지 않는다는 것이다.마치 내 축 옆에 놓여 있는 이미지 모음인 것처럼, 내 축에 대한 크기 조정/위치 조정은 내 이미지 모음에도 별도로 적용해야 합니다.내 축에 제대로 된 이미지가 있는 것처럼 우아해 보이지 않습니다.

제가 뭔가 끔찍한 잘못을 하고 있나요?내가 더 많은 정보를 제공해야 하는 사람?

다시 한 번 감사합니다.

업데이트: @larskotthoff 덕분에 다음과 같이 추가했습니다.

svg.select(".axis").selectAll("text").remove();

var ticks = svg.select(".axis").selectAll(".tick")
                    .data(dataset)
                    .append("svg:image")
                    .attr("xlink:href", function (d) { return d.img ; })
                    .attr("width", 100)
                    .attr("height", 100);

(거의) 효과가 있습니다!이미지를 표시하지만 짐작할 수 있듯이 각 이미지의 원점(즉, 왼쪽 상단 모서리)은 각 틱이 끝나는 지점이며, 그 결과 이미지가 틱 옆에 있는 것이 아니라 다이어그램 안에 렌더링됩니다.

충분한 StackOverflow rep이 없으면 이미지를 삽입할 수 없습니다.다음 URL을 참조해 주세요.i.stack.imgur.com/s2CX0.png 눈금 이미지가 눈금 대신 다이어그램 안에 표시됩니다.

이미지의 x와 y를 조작할 필요가 있는 것은 확실합니다만, 개별 틱의 위치에 대해서는 어떻게 조작할 수 있을까요?즉, D3에서는 "틱의 x, y를 취해서 (하드코드된 값의) 150을 빼서 내 이미지에 대해 새로운 x, y로 만들어라"라고 어떻게 말합니까?

도와주셔서 다시 한 번 감사드립니다!

업데이트 #2: 최종적으로 이것을 검출한 후, 부모노드를 파고든 후, 현재 축에 바인드 되어 있는 이미지에 설정되어 있는x, y 속성이 각 틱에 상대적인 것을 새롭게 알게 되었습니다.즉, 다음과 같이 간단하게 추가할 수 있습니다.

                    .attr("x", -120)
                    .attr("y", -50);

내 이미지에 대한 추가 속성으로 지정되며 각 눈금 왼쪽에 배치됩니다(축 레이블 위치 뒤로, 다이어그램 맨 위에 위치하지 않음).

데이터 세트:

var dataset = [
{
 "bank": "Bank 1",
 "img": "Picture1.png"
},
{
 "bank": "Bank 2",
 "img": "Picture2.png"
},                  
{
 "bank": "Bank 3",
 "img": "Picture3.png"
}
];

D3 JS 코드:

var w = 1000;
var h = 700;
var padding = 30;
var wpadding = 120;
var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h+padding);


svg.select(".axis").selectAll("text").remove();

var ticks = svg.select(".axis").selectAll(".tick")
                    .data(dataset)
                    .append("svg:image")
                    .attr("xlink:href", function (d) { return d.img ; })
                    .attr("width", 100)
                    .attr("height", 100);
                    .attr("x", -120);
                    .attr("y", -50);


var yScale = d3.scale.ordinal()
                .domain(dataset.map(function (d) { return d.bank; }))
                .rangeRoundBands([0, h], 0.55);

var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left");

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

언급URL : https://stackoverflow.com/questions/24763498/d3-js-using-images-with-filenames-specified-in-data-as-tick-values-on-axis