5
में प्रदर्शित नहीं हो रहा है I d3 v4 के नए संस्करण में parallel coordinates example "अनुवाद" करने का प्रयास कर रहा हूं। मैं इस जावास्क्रिप्ट के साथ एक काम कर उदाहरण (जो अतिरिक्त एक अच्छा उदाहरण है, तो किसी को भी डी 3 की v4 के साथ काम करने की कोशिश कर रहा है और नए कार्यों के साथ मुद्दों है) है:संशोधित पाठ d3 v4
var margin = {top: 30, right: 10, bottom: 10, left: 10},
width = 600 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var x = d3.scaleBand().rangeRound([0, width]).padding(1),
y = {},
dragging = {};
var line = d3.line(),
//axis = d3.axisLeft(x),
background,
foreground,
extents;
var svg = d3.select("#body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("cars.csv", function(error, cars) {
// Extract the list of dimensions and create a scale for each.
//cars[0] contains the header elements, then for all elements in the header
//different than "name" it creates and y axis in a dictionary by variable name
x.domain(dimensions = d3.keys(cars[0]).filter(function(d) {
if(d == "name") {
return false;
}
return y[d] = d3.scaleLinear()
.domain(d3.extent(cars, function(p) {
return +p[d]; }))
.range([height, 0]);
}));
extents = dimensions.map(function(p) { return [0,0]; });
// Add grey background lines for context.
background = svg.append("g")
.attr("class", "background")
.selectAll("path")
.data(cars)
.enter().append("path")
.attr("d", path);
// Add blue foreground lines for focus.
foreground = svg.append("g")
.attr("class", "foreground")
.selectAll("path")
.data(cars)
.enter().append("path")
.attr("d", path);
// Add a group element for each dimension.
var g = svg.selectAll(".dimension")
.data(dimensions)
.enter().append("g")
.attr("class", "dimension")
.attr("transform", function(d) { return "translate(" + x(d) + ")"; })
.call(d3.drag()
.subject(function(d) { return {x: x(d)}; })
.on("start", function(d) {
dragging[d] = x(d);
background.attr("visibility", "hidden");
})
.on("drag", function(d) {
dragging[d] = Math.min(width, Math.max(0, d3.event.x));
foreground.attr("d", path);
dimensions.sort(function(a, b) { return position(a) - position(b); });
x.domain(dimensions);
g.attr("transform", function(d) { return "translate(" + position(d) + ")"; })
})
.on("end", function(d) {
delete dragging[d];
transition(d3.select(this)).attr("transform", "translate(" + x(d) + ")");
transition(foreground).attr("d", path);
background
.attr("d", path)
.transition()
.delay(500)
.duration(0)
.attr("visibility", null);
}));
// Add an axis and title.
g.append("g")
.attr("class", "axis")
.each(function(d) { d3.select(this).call(d3.axisLeft(y[d]));})
//text does not show up because previous line breaks somehow
.append("text")
.style("text-anchor", "middle")
.attr("y", -9)
.text(function(d) { return d; });
// Add and store a brush for each axis.
g.append("g")
.attr("class", "brush")
.each(function(d) {
d3.select(this).call(y[d].brush = d3.brushY().extent([[-8, 0], [8,height]]).on("brush start", brushstart).on("brush", brush_parallel_chart));
})
.selectAll("rect")
.attr("x", -8)
.attr("width", 16);
});
function position(d) {
var v = dragging[d];
return v == null ? x(d) : v;
}
function transition(g) {
return g.transition().duration(500);
}
// Returns the path for a given data point.
function path(d) {
return line(dimensions.map(function(p) { return [position(p), y[p](d[p])]; }));
}
function brushstart() {
d3.event.sourceEvent.stopPropagation();
}
// Handles a brush event, toggling the display of foreground lines.
function brush_parallel_chart() {
for(var i=0;i<dimensions.length;++i){
if(d3.event.target==y[dimensions[i]].brush) {
extents[i]=d3.event.selection.map(y[dimensions[i]].invert,y[dimensions[i]]);
}
}
foreground.style("display", function(d) {
return dimensions.every(function(p, i) {
if(extents[i][0]==0 && extents[i][0]==0) {
return true;
}
return extents[i][1] <= d[p] && d[p] <= extents[i][0];
}) ? null : "none";
});
}
सब कुछ ठीक से काम करता (में से प्रत्येक पर brushing axes, axes के क्रम को बदल रहा है ...) सिवाय इसके कि प्रत्येक अक्ष के शीर्ष पर लेबल दिखाई नहीं दे रहे हैं, भले ही पाठ टैग संलग्न किया गया हो और टेक्स्ट टैग में लिखा गया हो (जांच के द्वारा जांच की जा सकती है ब्राउज़र का उपयोग कर परिणामस्वरूप एचटीएमएल)। मुझे विश्वास है कि कोड इसके लिए जिम्मेदार इस भाग है, लेकिन मैं कारण खोजने ऐसा क्यों होता है करने में सक्षम नहीं कर रहा हूँ:
g.append("g")
.attr("class", "axis")
.each(function(d) { d3.select(this).call(d3.axisLeft(y[d]));})
//text does not show up because previous line breaks somehow
.append("text")
.style("text-anchor", "middle")
.attr("y", -9)
.text(function(d) { return d; });
क्यों पाठ लेबल नहीं दिखाए जाते?
ये वास्तव में काम कर रहे डेमो नहीं हैं। मुझे पता है कि यह कोई प्रश्न नहीं था लेकिन ब्रश पोस्ट किए गए उदाहरण में काम नहीं कर रहे हैं। जब ब्रश हटा दिया जाता है तो वे फ़िल्टरिंग रीसेट नहीं करते हैं। – konrad
@ कोनराड डेमो ओपी के कोड की सिर्फ प्रतिकृतियां हैं, इस समस्या को हल करने के लिए एक पंक्ति को जोड़ा गया है। मैं उन्हें त्रुटि मुक्त या पूरी तरह से कार्यात्मक होने का दावा नहीं करता हूं। – altocumulus
निश्चित रूप से। सिर्फ यह इंगित करना चाहता था कि अगर अन्य लोगों ने भी ध्यान दिया हो। इस मुद्दे को संभावित रूप से कैसे संबोधित करने के बारे में टिप्पणी करने की परवाह है? – konrad