Javascript D3：带画笔和缩放的单位条形图（转置）
我试图将条形图从块中转置 为了更接近我自己的需求，但我一直坚持让Y轴与原始示例一样工作。左Y轴应该根据缩放和刷牙调整大小和移动，但无论我尝试什么，它都保持静态 感谢您的指导。以下是代码（只要您在浏览器中加载了d3.v4，它就可以在没有服务器的情况下工作）：Javascript D3：带画笔和缩放的单位条形图（转置）,javascript,d3.js,Javascript,D3.js,我试图将条形图从块中转置 为了更接近我自己的需求，但我一直坚持让Y轴与原始示例一样工作。左Y轴应该根据缩放和刷牙调整大小和移动，但无论我尝试什么，它都保持静态 感谢您的指导。以下是代码（只要您在浏览器中加载了d3.v4，它就可以在没有服务器的情况下工作）： 身体{ 字体系列：avenir next，无衬线； 字体大小：12px； } .zoom{ 光标：移动； 填充：无； 指针事件：全部； } 圈{ 填充：#FF7700； 填充不透明度：0.4； } .安讯士{ 笔划宽度：0.5px； 冲程：
身体{
字体系列：avenir next，无衬线；
字体大小：12px；
}
.zoom{
光标：移动；
填充：无；
指针事件：全部；
}
圈{
填充：#FF7700；
填充不透明度：0.4；
}
.安讯士{
笔划宽度：0.5px；
冲程：#888；
字体：10px avenir next，无衬线；
}
.轴>路径{
冲程：#888；
}
风险值数据=[
{
“消息id”：1970268，
“发送时间”：“2013-04-05”，
“每天发送的消息”：1
},
{
“消息id”：2298946，
“发送时间”：“2013-05-29”，
“每天发送的消息”：1
},
{
“消息id”：2575515，
“发送时间”：“2013-07-13”，
“每天发送的消息”：1
},
{
“消息id”：2610242，
“发送时间”：“2013-07-17”，
“每天发送的消息”：1
},
{
“消息id”：2926234，
“发送时间”：“2013-08-20”，
“每天发送的消息”：1
},
{
“消息id”：3110458，
“发送时间”：“2013-09-06”，
“每天发送的消息”：2
},
{
“消息id”：3130002，
“发送时间”：“2013-09-08”，
“每天发送的消息”：3
},
{
“消息id”：3255637，
“发送时间”：“2013-09-18”，
“每天发送的消息”：4
},
{
“消息id”：3387239，
“发送时间”：“2013-09-29”，
“每天发送的消息”：1
},
{
“消息id”：3447200，
“发送时间”：“2013-10-03”，
“每天发送的消息”：7
},
{
“消息id”：3861761，
“发送时间”：“2013-11-05”，
“每天发送的消息”：7
},
{
“消息id”：3949012，
“发送时间”：“2013-11-12”，
“每天发送的消息”：1
},
{
“消息id”：4082149，
“发送时间”：“2013-11-21”，
“每天发送的消息”：1
},
{
“消息id”：4155079，
“发送时间”：“2013-11-27”，
“每天发送的消息”：1
},
{
“消息id”：4214299，
“发送时间”：“2013-12-03”，
“每天发送的消息”：4
},
{
“消息id”：4348242，
“发送时间”：“2013-12-12”，
“每天发送的消息”：3
},
{
“消息id”：4374202，
“发送时间”：“2013-12-15”，
“每天发送的消息”：6
},
{
“消息id”：4384330，
“发送时间”：“2013-12-16”，
“每天发送的消息”：3
},
{
“消息id”：4495880，
“发送时间”：“2013-12-26”，
“每天发送的消息”：1
},
{
“消息id”：4569256，
“发送时间”：“2014-01-01”，
“每天发送的消息”：3
},
{
“消息id”：4583204，
“发送时间”：“2014-01-02”，
“每天发送的消息”：1
},
{
“消息id”：4621515，
“发送时间”：“2014-01-04”，
“每天发送的消息”：7
},
{
“消息id”：4678673，
“发送时间”：“2014-01-07”，
“每天发送的消息”：1
},
{
“消息id”：4743194，
“发送时间”：“2014-01-10”，
“每天发送的消息”：4
},
{
“消息id”：4761212，
“发送时间”：“2014-01-11”，
“每天发送的消息”：5
}];
/*改编自：https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172 */
var margin={顶部：20，右侧：20，底部：90，左侧：50}，
margin2={top:20，right:20，bottom:30，left:400}，
宽度=500-边距。左侧-边距。右侧，
宽度2=500-边缘2.左侧-边缘2.右侧，
高度=500-margin.top-margin.bottom；
var parseTime=d3.timeParse（“%Y-%m-%d”）；
var x=d3.scaleLinear（）.range（[5，宽度-100]），
x2=d3.scaleLinear（）.范围（[5，宽度2]），
y=d3.scaleTime（）.range（[10，高度]），
y2=d3.scaleTime（）.range（[10，高度]）
;
var xAxis=d3.axisBottom（x）.tickSize（0），
yAxis=d3.轴左（y）.尺寸（1）；
yAxis2=d3.轴左（y2）.尺寸（0）；
var brush=d3.brushY（）
.范围（[[0,0]，[width2，height]]）
.在（“刷子”，刷子）；
var zoom=d3.zoom（）
.scaleExtent（[1，无穷大]）
.translateExtent（[[0,0]，[width，height]]
.范围（[[0,0]，[width，height]]）
。打开（“缩放”，缩放）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）；
svg.append（“defs”）.append（“clipPath”）
.attr（“id”、“剪辑”）
.append（“rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var focus=svg.append（“g”）
.attr（“类”、“焦点”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var context=svg.append（“g”）
.attr（“类”、“上下文”）
.attr（“transform”、“translate”（+margin2.left+）、“+margin2.top+”）；
//从CSV加载数据
data.forEach（函数（d）{
d、 发送时间=解析时间（d.发送时间）；
});
var xMin=d3.min（数据，函数（d）{returnd.messages\u sent\u in\u day；}）；
var xMax=d3.max（数据，函数（d）{returnd.messages\u sent\u in\u day；}）；
var yMin=d3.min（数据，函数（d）{返回d.sent_time；}）；
var yMax=d3.max（数据，函数（d）{返回d.sent_time；}）；
x、 域（[xMin，xMax]）；
y、 域（[yMin，new Date（）]）；
x2.域（x.域（））；
y2.域（y.域（））；
var num_messages=函数（dataArray，domainRange）{返回d3.sum（dataArray，函数（d）{
返回d.sent\u time>=domainRange.domain（）[0]&&d.sent\u time调用yAxis时，需要将类y轴而不是轴--y添加到组中
身体{
字体系列：avenir next，无衬线；
字体大小：12px；
}
.zoom{
光标：移动；
填充：无；
指针事件：全部；
}
圈{
/*填充：#FF7700*/
填充物：红色；
/*填充不透明度：0.4*/
填充不透明度：1.0；
}
.安讯士{
笔划宽度：0.5px；
冲程：#888；
字体：10px avenir next，无衬线；
}
.轴>路径{
冲程：#888；
}
风险值数据=[{
“消息id”：1970268，
“发送时间”：“2013-04-05”，
“每天发送的消息”：1
}
<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
body {
font-family: avenir next, sans-serif;
font-size: 12px;
}
.zoom {
cursor: move;
fill: none;
pointer-events: all;
}
circle {
fill: #FF7700;
fill-opacity: 0.4;
}
.axis {
stroke-width: 0.5px;
stroke: #888;
font: 10px avenir next, sans-serif;
}
.axis > path {
stroke: #888;
}
</style>
<body>
</body>
<--script src="../src/d3.v4.min.js"></script-->
<script>
var data = [
{
"message_id": 1970268,
"sent_time": "2013-04-05",
"messages_sent_in_day": 1
},
{
"message_id": 2298946,
"sent_time": "2013-05-29",
"messages_sent_in_day": 1
},
{
"message_id": 2575515,
"sent_time": "2013-07-13",
"messages_sent_in_day": 1
},
{
"message_id": 2610242,
"sent_time": "2013-07-17",
"messages_sent_in_day": 1
},
{
"message_id": 2926234,
"sent_time": "2013-08-20",
"messages_sent_in_day": 1
},
{
"message_id": 3110458,
"sent_time": "2013-09-06",
"messages_sent_in_day": 2
},
{
"message_id": 3130002,
"sent_time": "2013-09-08",
"messages_sent_in_day": 3
},
{
"message_id": 3255637,
"sent_time": "2013-09-18",
"messages_sent_in_day": 4
},
{
"message_id": 3387239,
"sent_time": "2013-09-29",
"messages_sent_in_day": 1
},
{
"message_id": 3447200,
"sent_time": "2013-10-03",
"messages_sent_in_day": 7
},
{
"message_id": 3861761,
"sent_time": "2013-11-05",
"messages_sent_in_day": 7
},
{
"message_id": 3949012,
"sent_time": "2013-11-12",
"messages_sent_in_day": 1
},
{
"message_id": 4082149,
"sent_time": "2013-11-21",
"messages_sent_in_day": 1
},
{
"message_id": 4155079,
"sent_time": "2013-11-27",
"messages_sent_in_day": 1
},
{
"message_id": 4214299,
"sent_time": "2013-12-03",
"messages_sent_in_day": 4
},
{
"message_id": 4348242,
"sent_time": "2013-12-12",
"messages_sent_in_day": 3
},
{
"message_id": 4374202,
"sent_time": "2013-12-15",
"messages_sent_in_day": 6
},
{
"message_id": 4384330,
"sent_time": "2013-12-16",
"messages_sent_in_day": 3
},
{
"message_id": 4495880,
"sent_time": "2013-12-26",
"messages_sent_in_day": 1
},
{
"message_id": 4569256,
"sent_time": "2014-01-01",
"messages_sent_in_day": 3
},
{
"message_id": 4583204,
"sent_time": "2014-01-02",
"messages_sent_in_day": 1
},
{
"message_id": 4621515,
"sent_time": "2014-01-04",
"messages_sent_in_day": 7
},
{
"message_id": 4678673,
"sent_time": "2014-01-07",
"messages_sent_in_day": 1
},
{
"message_id": 4743194,
"sent_time": "2014-01-10",
"messages_sent_in_day": 4
},
{
"message_id": 4761212,
"sent_time": "2014-01-11",
"messages_sent_in_day": 5
}];
</script>
<script>
/* Adapted from: https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172 */
var margin = {top: 20, right: 20, bottom: 90, left: 50},
margin2 = {top: 20, right: 20, bottom: 30, left: 400},
width = 500 - margin.left - margin.right,
width2 = 500 - margin2.left - margin2.right,
height = 500 - margin.top - margin.bottom;
var parseTime = d3.timeParse("%Y-%m-%d");
var x = d3.scaleLinear().range([5, width-100]),
x2 = d3.scaleLinear().range([5, width2]),
y = d3.scaleTime().range([10, height]),
y2 = d3.scaleTime().range([10, height])
;
var xAxis = d3.axisBottom(x).tickSize(0),
yAxis = d3.axisLeft(y).tickSize(1);
yAxis2 = d3.axisLeft(y2).tickSize(0);
var brush = d3.brushY()
.extent([[0, 0], [width2, height]])
.on("brush", brushed);
var zoom = d3.zoom()
.scaleExtent([1, Infinity])
.translateExtent([[0, 0], [width, height]])
.extent([[0, 0], [width, height]])
.on("zoom", zoomed);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
var focus = svg.append("g")
.attr("class", "focus")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var context = svg.append("g")
.attr("class", "context")
.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
// Data Load from CSV
data.forEach(function(d) {
d.sent_time = parseTime(d.sent_time);
});
var xMin = d3.min(data, function(d) { return d.messages_sent_in_day; });
var xMax = d3.max(data, function(d) { return d.messages_sent_in_day; });
var yMin = d3.min(data, function(d) { return d.sent_time; });
var yMax = d3.max(data, function(d) { return d.sent_time; });
x.domain([xMin, xMax]);
y.domain([yMin, new Date()]);
x2.domain(x.domain());
y2.domain(y.domain());
var num_messages = function(dataArray, domainRange) { return d3.sum(dataArray, function(d) {
return d.sent_time >= domainRange.domain()[0] && d.sent_time <= domainRange.domain()[1];
})
}
// append scatter plot to main chart area
var messages = focus.append("g");
messages.attr("clip-path", "url(#clip)");
messages.selectAll("message")
.data(data)
.enter().append("circle")
.attr('class', 'message')
.attr("r", 2)
.style("opacity", 0.4)
.attr("cx", function(d) { return x(d.messages_sent_in_day); })
.attr("cy", function(d) { return y(d.sent_time); })
focus.append("g")
.attr("class", "axis x-axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
focus.append("g")
.attr("class", "axis axis--y")
.call(yAxis);
// Summary Stats
focus.append("text")
.attr("transform", "rotate(-90)")
.attr("x",0 - height)
.attr("y", 0 - margin.left)
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Date");
svg.append("text")
.attr("transform",
"translate(" + ((width + margin.right + margin.left)/2) + " ," +
(height + margin.top + margin.bottom) + ")")
.style("text-anchor", "middle")
.text("Messages");
svg.append("rect")
.attr("class", "zoom")
.attr("width", width)
.attr("height", height)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(zoom);
// append scatter plot to brush chart area
var messages = context.append("g");
messages.attr("clip-path", "url(#clip)");
messages.selectAll("message")
.data(data)
.enter().append("circle")
.attr('class', 'messageContext')
.attr("r",1)
.style("opacity", .6)
.attr("cx", function(d) { return x2(d.messages_sent_in_day); })
.attr("cy", function(d) { return y2(d.sent_time); })
context.append("g")
.attr("class", "axis y-axis")
//.attr("transform", "translate(" + width + ", 0)")
.call(yAxis2);
context.append("g")
.attr("class", "brush")
.call(brush)
.call(brush.move, y.range());
//create brush function redraw scatterplot with selection
function brushed() {
if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
var s = d3.event.selection || y2.range();
y.domain(s.map(y2.invert, y2));
focus.selectAll(".message")
.attr("cx", function(d) { return x(d.messages_sent_in_day); })
.attr("cy", function(d) { return y(d.sent_time); });
focus.select(".y-axis").call(yAxis);
svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
.scale(height / (s[1] - s[0]))
.translate(s[0], 0));
}
function zoomed() {
if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
var t = d3.event.transform;
y.domain(t.rescaleY(y2).domain());
focus.selectAll(".message")
.attr("cx", function(d) { return x(d.messages_sent_in_day); })
.attr("cy", function(d) { return y(d.sent_time); })
;
focus.select(".y-axis").call(yAxis);
context.select(".brush").call(brush.move, y.range().map(t.invertY, t));
}
</script>