HIII - d3 / v4: я пытаюсь увеличить ось Y, используя функцию Brush, метки / текстовые элементы, которые я там создал, используя функцию scalePoint (), а не scaleLinear ... Мой Xaxis - это дата и масштабирование хорошо;
но я не могу сделать это с осью Y;Я получаю сообщение об ошибке "*
369 Uncaught TypeError: undefined не является функцией
*", когда я пытаюсь выполнить работу по оси Y .... пожалуйста, вы можете помочьменя за это .. (код прилагается)
var margin = {top: 50, right: 30, bottom: 30, left: 10};
padding = {top: 60, right: 260, bottom: 60, left: 120};
outerWidth =1560;
outerHeight = 600;
innerWidth = outerWidth - margin.left - margin.right;
innerHeight = outerHeight - margin.top - margin.bottom;
width = innerWidth - padding.left - padding.right;
height = innerHeight - padding.top - padding.bottom;
var ratio = height / width;
var container = d3.select("body").append("div")
.attr("id", "halfpage");
var svgContainer = container.append('svg')
.attr('id', 'sky')
.attr("class","svgcontainer")
.append("g");
var data =
[{"PlannedDate":"3/2/2009","ActualDate":"2/15/2009","ForecastDate":"2/2/2009","Label":"Label1"},
{"PlannedDate": "27.03.2009", "ActualDate": "10.02.2009", "ForecastDate":"27.02.2009", "Метка": "Метка2"},
{"PlannedDate": "15.04.2009", "ActualDate": "07.05.2009", "ForecastDate":" 30.03.2009 "," Label ":" Label3 "},
{" PlannedDate ":" 15.02.2010 "," ActualDate ":" 05.03.2010 ","ForecastDate": "03.02.2010", "Label": "Label4"},
{"PlannedDate": "06.02.2010", "ActualDate": "3/3/2010"," ForecastDate ":" 07.02.2010 "," Label ":" Label5 "},
{" PlannedDate ":" 6/6/2010 "," ActualDate ":" 7/3/ 2010 "," ForecastDate ":" 9/6/2010 "," Label ":" Label6 "},
{" PlannedDate ":" 23.01.2011 "," ActualDate ":" 2/ 11/2011 "," ForecastDate ":" 1/03/2011 "," Label ":" Label7 "},
{" PlannedDate ":" 19.01.2011 "," ActualDate ":"13.02.2011", "ForecastDate": "01.09.2011", "Label": "Label8"},
{"PlannedDate": "3 /12/2011 "," ActualDate ":" 15.03.2011 "," ForecastDate ":" 14.02.2011 "," Label ":" Label9 "},
{" PlannedDate ":"23.04.2011 "," ActualDate ":" 17.05.2011 "," ForecastDate ":" 10.10.2011 "," Label ":" Label10 "},
{" PlannedDate ": "07.07.2011", "ActualDate": "11.07.2011", "ForecastDate": "03.06.2011", "Label": "Label11"},
{"PlannedDate ":" 17.04.2012 "," ActualDate ":" 13.05.2012 "," ForecastDate ":" 15.03.2012 "," Label ":" Label12 "},
{"PlannedDate":"4/23/2014","ActualDate":"5/19/2014","ForecastDate":"4/27/2014","Label":"Label26"}];
// Add X axis
var tParser = d3.timeParse("%m/%d/%Y");
var dayFormat = d3.timeFormat("%B-%y");
var s1 = d3.max(data, function(d) { return tParser(d.ForecastDate);});
var e1 = d3.min(data, function(d) { return tParser(d.ForecastDate);});
var x = d3.scaleTime()
.domain([e1, s1])
.range([0, width]);
xAxis = svgContainer.append("g")
.attr("transform", "translate(80," + height + ")")
.call(d3.axisBottom(x))
// Add Y axis
var y = d3.scalePoint()
.domain(data.map(function(d){return d.Label;}))
.range([height, 30]);
var yAxis = svgContainer.append("g")
.attr("transform", "translate(80," + 0 + ")")
.call(d3.axisLeft(y));
var allGroup = ["ForecastValues", "ActualValues", "PlannedValues"];
var myColor = d3.scaleOrdinal()
.domain(allGroup)
.range(["#46f2f2","#cf1fc3","#cfcf1f"]);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var clip = svgContainer.append("defs").append("svg:clipPath")
.attr("id", "clip")
.append("svg:rect")
.attr("width", width+200 )
.attr("height", height+150 )
.attr("x", 0)
.attr("y", 0);
var scatter = svgContainer.append('g')
.attr("clip-path", "url(#clip)");
scatter.append('g')
.selectAll("myPoints")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) {return x(tParser(d.ForecastDate)) } )
.attr("cy", function(d) {return y(d.Label) } )
.attr("r", 5)
.attr("stroke", "#46f2f2")
.attr("fill","#f7ffff")
.attr("stroke-width", 5)
.attr ("transform", function(d,i) {
var translate = [80, 0];
return "translate("+translate+")";})
.on("mouseover", function(d) {
div.transition()
.duration(1000)
.style("opacity", .9);
div .html((d.ForecastDate) + "," + d.Label)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
scatter.append('g')
.selectAll("myPoints")
.data(data)
.enter()
.append("path")
.attr("class", "point")
.attr("stroke", "#cfcf1f")
.attr("fill","#f7ffff")
.attr("stroke-width", 3)
.attr("d", d3.symbol().type(d3.symbolTriangle).size(50))
.attr("transform", function(d) { return "translate(" +
(x(tParser(d.PlannedDate))+80) + "," + y(d.Label) + ")"; })
.on("mouseover", function(d) {
div.transition()
.duration(1000)
.style("opacity", .9);
div .html((d.PlannedDate) + "," + d.Label)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
scatter.append('g')
.selectAll("myPoints")
.data(data)
.enter()
.append("path")
.attr("class", "point")
.attr("stroke", "#cf1fc3")
.attr("fill","#f7ffff")
.attr("stroke-width", 4)
.attr("d", d3.symbol().type(d3.symbolWye).size(90))
.attr("transform", function(d) { return "translate(" +
(x(tParser(d.ActualDate))+80) + "," + y(d.Label) + ")"; })
.on("mouseover", function(d) {
div.transition()
.duration(1000)
.style("opacity", .9);
div .html((d.ActualDate) + "," + d.Label)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
scatter.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "#46f2f2")
.attr("stroke-width", 1.5)
.attr("d", d3.line()
.curve(d3.curveBasis)
.x(function(d) { return x(tParser(d.ForecastDate)) })
.y(function(d) { return y(d.Label) }))
.attr ("transform", function(d,i) {
var translate = [80, 0];
return "translate("+translate+")";});
scatter.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "#cfcf1f")
.attr("stroke-width", 1.8)
.attr("d", d3.line()
.curve(d3.curveBasis)
.x(function(d) { return x(tParser(d.PlannedDate)) })
.y(function(d) { return y(d.Label) }))
.attr ("transform", function(d,i) {
var translate = [80, 0];
return "translate("+translate+")";});
scatter.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "#cf1fc3")
.attr("stroke-width", 2.0)
.attr("d", d3.line()
.curve(d3.curveBasis)
.x(function(d) { return x(tParser(d.ActualDate)) })
.y(function(d) { return y(d.Label) }))
.attr ("transform", function(d,i) {
var translate = [80, 0];
return "translate("+translate+")";});
var brush = d3.brush().extent([[80, 0], [width+100, height]]).on("end", brushended),
idleTimeout,
idleDelay = 350;
scatter.append("g")
.attr("class", "brush")
.call(brush);
function brushended() {
var s = d3.event.selection;
if (!s) {
if (!idleTimeout) return idleTimeout = setTimeout(idled, 350);
x.domain([0, d3.max(data, function(d){return Math.max(d.ActualDate)})]);
y.domain(data.map(function(d){return d.Label;}));
} else {
x.domain([s[0][0]* ratio, s[1][0]].map(x.invert, x));
y.domain([s[1][1]* ratio, s[0][1]].map(y.invert, y));
scatter.select(".brush").call(brush.move, null);
}
zoom();
}
function idled() {
idleTimeout = null;
}
function zoom() {
var t = scatter.transition().duration(1150);
xAxis.transition(t).duration(1150).call(d3.axisBottom(x));
yAxis.transition(t).duration(1150).call(d3.axisLeft(y));
scatter.selectAll("circle").transition(t)
.attr("cx", function(d) {return x(tParser(d.ForecastDate)) } )
.attr("cy", function(d) {return y(d.Label) } )
.attr("r", 5);
scatter.selectAll("path")//.transition(t)
.attr("class", "point")
.attr("d", d3.symbol().type(d3.symbolTriangle).size(50))
<!-- //.attr("transform", function(d) { return "translate(" +
(x(tParser(d.PlannedDate))+80) + "," + y(d.Label) + ")"; }); -->
scatter.selectAll("path").transition(t)
.attr("class", "point")
.attr("d", d3.symbol().type(d3.symbolWye).size(90))
<!-- //.attr("transform", function(d) { return "translate(" +
(x(tParser(d.ActualDate))+80) + "," + y(d.Label) + ")"; }); -->
scatter.selectAll("path")//.transition(t)
.attr("d", d3.line()
.curve(d3.curveBasis)
.x(function(d) { return x(tParser(d.ForecastDate)) })
.y(function(d) { return y(d.Label) }))
.attr ("transform", function(d,i) {
var translate = [80, 0];
return "translate("+translate+")";});
scatter.selectAll("path")//.transition(t)
.attr("d", d3.line()
.curve(d3.curveBasis)
.x(function(d) { return x(tParser(d.PlannedDate)) })
.y(function(d) { return y(d.Label) }))
.attr ("transform", function(d,i) {
var translate = [80, 0];
return "translate("+translate+")";});
scatter.selectAll("path")//.transition(t)
.attr("d", d3.line()
.curve(d3.curveBasis)
.x(function(d) { return x(tParser(d.ActualDate)) })
.y(function(d) { return y(d.Label) }))
.attr ("transform", function(d,i) {
var translate = [80, 0];
return "translate("+translate+")";});
}
var legend = scatter.selectAll('l')
.data(myColor.domain())
.enter()
.append('g')
.attr('class', 'legend')
.attr('transform', function(d,i){ return 'translate(-50,' + (i-.5) * 20 + ')'; });
legend.append('circle')
.attr('cx',width+240)
.attr('cy', 198)
.attr('r', 6)
.style('fill', myColor);
legend.append('text')
.attr('x', width+150)
.attr('y', 198)
.attr('dy', '.35em')
.style('text-anchor', 'start')
.style("font-size", "13px")
.style("font-family", "Calibri")
.style("fill", myColor)
.text(function(d){ return d; });
scatter.append("text")
.attr("class", "x label")
.attr("text-anchor", "bottom")
.attr("x", 660)
.attr("y", 455)
.text("Estimated Date")
.style("fill","#e67010")
.style("font-size", "14px")
.style("font-family", "Calibri");
scatter.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("x", -180)
.attr("y", 25)
.attr("dy", "0.5em")
.attr("transform", "rotate(-90)")
.text("Labels")
.style("fill","#e67010")
.style("font-size", "14px")
.style("font-family", "Calibri");
scatter.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("x", 795)
.attr("y", 10)
.attr("dy", "0.5em")
.attr("transform", "rotate(0)")
.text("Scatter Visualisation")
.style("fill","#e8a874")
.style("font-size", "13px")
.style("font-family", "Arial Black");
scatter.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("x", 1330)
.attr("y", 165)
.attr("dy", "0.5em")
.attr("transform", "rotate(0)")
.text("Legend")
.style("fill","#de9331")
.style("font-size", "12px")
.style("font-family", "Arial Black");
</script>