슬라이더를 통해 원의 색상 속성을 변경하려고합니다. 첫째,이 함수를 호출 RGB의 R 값입니다.drawCircle(red)red
function drawCircle(red) {
var circ = svg.selectAll(".circle")
.enter().append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 20)
.style("fill", d3.rgb(red, 0, 0));
}
// Initial values on page load
drawCircle(100);
이것은 잘 작동하지만 이제 슬라이더를 통해 빨간색 구성 요소를 0에서 255로 변경하고 싶습니다. 그래서이 예제 에서 슬라이더를 만들었습니다 .
var sliderScale = d3.scaleLinear()
.domain([0, 255]) // Red component goes from 0 to 255
.range([0, 200]) // Width of slider is 200 px
.clamp(true);
var slider = svg.append("g")
.attr("class", "slider")
.attr("transform", "translate(" + 600 + "," + 200 + ")");
slider.append("line")
.attr("class", "track")
.attr("x1", sliderScale.range()[0])
.attr("x2", sliderScale.range()[1])
.select(function() { return
this.parentNode.appendChild(this.cloneNode(true)); })
.attr("class", "track-inset")
.select(function() { return
this.parentNode.appendChild(this.cloneNode(true)); })
.attr("class", "track-overlay")
.call(d3.drag()
.on("start.interrupt", function() { slider.interrupt(); })
.on("start drag", function() { changeRed(sliderScale.invert(d3.event.x)); }));
var handle = slider.insert("circle", ".track-overlay")
.attr("class", "handle")
.attr("r", 9);
function changeRed(h) {
handle.attr("cx", sliderScale(h));
drawCircle(h);
}
슬라이더를 움직일 수 있지만 색상에 변화가 없습니다.
코드를 리팩토링했습니다. 그리고 jsfiddle- https : //jsfiddle.net/kdj9xq98/에 올려 놓으십시오 .
var svg = d3.select('#root').append('svg')
.attr('width', 400)
.attr('height', 400);
var circ = svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 20);
function fillCircle(red) {
circ.style("fill", d3.rgb(red, 0, 0));
}
// Initial values on page load
fillCircle(100);
var sliderScale = d3.scaleLinear()
.domain([0, 255]) // Red component goes from 0 to 255
.range([0, 200]) // Width of slider is 200 px
.clamp(true);
var slider = svg.append("g")
.attr("class", "slider")
.attr("transform", "translate(" + 13 + "," + 200 + ")");
slider.append("line")
.attr("class", "track")
.attr("x1", sliderScale.range()[0])
.attr("x2", sliderScale.range()[1])
.select(function() {
return this.parentNode;
})
.append("line")
.attr("x1", sliderScale.range()[0])
.attr("x2", sliderScale.range()[1])
.attr("class", "track-inset")
.select(function() {
return this.parentNode;
})
.append("line")
.attr("x1", sliderScale.range()[0])
.attr("x2", sliderScale.range()[1])
.attr("class", "track-overlay")
.call(d3.drag()
.on("start.interrupt", function() {
slider.interrupt();
})
.on("start drag", function() {
changeRed(sliderScale.invert(d3.event.x));
}));
var handle = slider.insert("circle", ".track-overlay")
.attr("class", "handle")
.attr("r", 9);
function changeRed(h) {
handle.attr("cx", sliderScale(h));
fillCircle(h);
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다