d3.js에 이미지 추가

저는 자바 스크립트 및 d3.js의 초보자입니다. 차트의 해당 지점에 이미지를 추가하고 싶었습니다. 나는 많은 질문과 기사를 읽었지만 제대로 이해하지 못했습니다. 다음은이 이미지는 위의 코드의 출력 내 코드d3.js에 이미지 추가

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 
.bar { 
    fill: steelblue; 
} 
.bar:hover { 
    fill: brown; 
} 
.axis--x path { 
    display: none; 
} 
.line { 
    fill: none; 
    stroke: steelblue; 
    stroke-width: 3px; 
} 
.circle { 
    fill: steelblue; 
} 
.axis--y path, .axis--y line { 
    fill: none; 
    stroke: none; 
} 
</style> 
<svg width="960" height="500"></svg> 
<script src="http://localhost/d3.js"></script> 
<script> 
var svg = d3.select("svg"), 
    margin = {top: 50, right: 50, bottom: 30, left: 80}, 
    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().range([height, 0]).padding(0.1); 
var g = svg.append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
d3.tsv("http://localhost/data1.tsv", function(d) { 
    d.frequency = +d.frequency; 
    return d; 
}, function(error, data) { 
    if (error) throw error; 

    var line = d3.line() 
    .x(function(d) { return x(d.frequency); }) 
    .y(function(d) { return y(d.letter)+30; }) 
    .curve(d3.curveStepAfter); 

    x.domain([0, d3.max(data, function(d) { return d.frequency; })]); 

    y.domain(data.map(function(d) { return d.letter; })); 

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

    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") 
     .text("letter"); 

    g.append("path") 
    .datum(data) 
    .attr("class", "line") 
    .attr("d", line); 

}); 
</script>

입니다 :

This image is the output of the above code 나는 아래 링크에서와 같이 줄에 아이콘 또는 작은 이미지를 추가 할

이 이미지는 차트에 아이콘을 추가하는 방법을 보여줍니다.

This image shows how I want to add icons to my chart

내 질문과 비슷한 질문은 How do I display an icon at a point on a line chart using d3.js이지만 나에게 도움이되지 않으며 맞춤 아이콘을 추가하고 싶습니다.

누군가 나를 도와 줄 수 있습니까? 나는 이것을 꽤 오랫동안하고있다.

출처

2017-10-25 jibin mathew

이미지 태그를 사용해 보셨습니까? https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image – GramThanos

비슷한 질문에 대한 대답이 문제가되어서는 안됩니다. 이러한 접근 방식을 사용하여 퍼가기 아이콘을 얼마나 정확하게 사용하고 있는지 알려주십시오. 또한 일부 데이터를 추가 할 수 있습니까? – Shashank

위의 코드에서 그려진 원 대신 내 시스템에 저장된 이미지를 추가하려고합니다. ("HREF 인 XLink", "HTTP : //localhost/whatsapp-logo.jpg") .attr –

이 example 같은 툴팁에 대한 이미지를 추가하고자하는 경우,하여이 example 대체하는 점에서 보면, 데이터 포인트와 같은 이미지를 추가하고자하는 경우

focus.append('svg:image') .attr({ 'xlink:href': 'test.png', x: 0, y: 0, width: 10, height: 10 });

같은 것을 추가하여 이미지로 원을 대체 위의 코드와 같은 이미지.

출처

2017-10-25 18:50:55 ssiluveru

는 다음 코드를 g.append ('이미지') .DATA (데이터) .attr을 추가 한 .attr ("y", function (d) {return y (d.letter) +30;}) .attr ("x", function (d) {return x (d.frequency) 너비 ", 24) .attr ("height ", 24) 첫 번째 이미지의 첫 번째 이미지 만 표시되고 나머지는 표시되지 않습니다. 왜 이렇게이다? –

d3.js에 이미지 추가

답변

관련 문제