0
여러 줄 차트가 있으므로 툴팁으로 차트를 플롯합니다. 도움말은 원입니다. 줄거리D3 전환 서클 툴팁 오류
function renderStates(localArr) {
x.domain([
d3.min(localArr, function (c) {
return d3.min(c.values, function (v) {
return v.date;
});
}),
d3.max(localArr, function (c) {
return d3.max(c.values, function (v) {
return v.date;
});
})
]);
y.domain([
d3.min(localArr, function (c) {
return d3.min(c.values, function (v) {
return v.cost;
});
}),
d3.max(localArr, function (c) {
return d3.max(c.values, function (v) {
return v.cost;
});
})
]);
var container = '#container-graph-state';
var svg = d3.select(container).append("svg")
.attr("width", width2 + margin.left + margin.right)
.attr("height", height2 + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height2 + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Total(R$)");
var city = svg.selectAll(".city")
.data(localArr)
.enter().append("g")
.attr("class", "city");
city.append("path")
.attr("class", "line")
.attr("d", function (d) {
return lineCost(d.values);
})
.style("stroke", function (d) {
return colorMultiline(d.group);
})
.transition()
.duration(2000)
;
city.append("text")
.datum(function (d) {
return {name: d.name, value: d.values[d.values.length - 1]};
})
.attr("transform", function (d) {
return "translate(" + x(d.value.date) + "," + y(d.value.cost) + ")";
})
.attr("class", 'textname')
.attr("x", 3)
.attr("dy", ".35em")
.text(function (d) {
return d.name;
});
city.selectAll("circle")
.data(function (d) {
return(d.values);
})
.enter()
.append("circle")
.attr("class", "tipcircle")
.attr("cx", function (d, i) {
return x(d.date);
})
.attr("cy", function (d, i) {
return y(d.cost);
})
.attr("r", 12)
.style('opacity', 1e-6)//1e-6
.attr("title", maketip);
$('circle').tipsy({opacity: .9, gravity: 'n', html: true});
}
인 기능을하지만 내 라인이 업데이트 동그라미하지 않았다되는 차트를 필터링 할 때.
function reRenderStates(localArr, container) {
var svg = d3.select(container)
.select("svg g");
svg.selectAll(".y.axis").transition().duration(300).ease("linear").call(yAxis);
svg.selectAll(".x.axis").transition().duration(300).ease("linear").call(xAxis);
var t01 = svg.selectAll(".city")
.data(localArr, function key(d) {
return d.name;
});
var t01Enter = t01.enter().append("g")
.attr("class", "city");
t01Enter.append("path")
.attr("class", "line")
.attr("d", function (d) {
return lineCost(d.values);
})
.style("stroke", function (d) {
return colorMultiline(d.group);
})
.transition().duration(750);
t01Enter.append("text")
.attr("class", "textEnd")
.datum(function (d) {
return {name: d.name, value: d.values[d.values.length - 1]};
})
.attr("transform", function (d) {
return "translate(" + x(d.value.date) + "," + y(d.value.cost) + ")";
})
.attr("x", 3)
.attr("dy", ".35em")
.text(function (d) {
return d.name;
})
.transition().duration(750);
t01Enter.selectAll("circle")
.data(function (d) {
return(d.values);
})
.enter()
.append("circle")
.attr("class", "tipcircle")
.attr("cx", function (d, i) {
return x(d.date);
})
.attr("cy", function (d, i) {
return y(d.cost);
})
.attr("r", 12)
.style('opacity', 1e-6)//1e-6
.attr("title", maketip)
.transition().duration(750);
t01.exit().transition().duration(750).remove();
// Then transition the y-axis.
var t1 = t01.transition();
svg.transition().duration(750).transition().selectAll(".y.axis").call(yAxis);
t1.select(".line").attr("d", function (d) {
return lineCost(d.values);
});
t1.select("text")
.attr("transform", function (d) {
return "translate(" + x(d.values[d.values.length - 1].date) + "," + y(d.values[d.values.length - 1].cost) + ")";
});
$('circle').tipsy({opacity: .9, gravity: 'n', html: true});
}
나는 원을 업데이트하는 여러 가지 방법을 시도했다. 누군가 내가 해결하도록 도울 수 있습니까?
편집
체크 아웃 바이올린 https://jsfiddle.net/rafarorafaro/t22svjkm/
당신은 함께 작업 바이올린을 넣을 수 있을까? 하나의 렌더링/다시 렌더링 기능 (업데이트) 만 있으면 좋을 것입니다. 그 방법은 중복 코드가 없습니다 – thatOneGuy
지연 죄송합니다. 나는 숙제가 많다. 나는 바이올린에 넣지 않았지만 호스트가 http://megakosmos.com.br/visualization/index/map2 팁 주셔서 감사합니다. 이미 d3에 초보자입니다. –