D3.js 在streamgraph偏移中设置任意中心

我在streamgraph堆栈布局中有数据，我追求的理想美学是将任意系列指定为中心线。这些行上方的系列（由其在数据中的索引确定）将堆叠在顶部，该行下方的系列将堆叠在底部

给你

在本例中，我希望MS和RC系列是单个水平线，其他组分别堆叠在它们的上方和下方。（与数据索引相反，我还可以根据一些数据属性设置中间系列，在本例中，最早的日期是有意义的。）

我认为解决方案需要传递我自己的偏移函数，但我很难弄清楚内置函数是如何完成它们的功能的

HTML

JS

//改编自https://gist.github.com/WillTurman/4631136
风险值数据=[
{“key”：“DJ”，“value”：0，“date”：“1/8/13”}，
{“key”：“DJ”，“value”：0，“date”：“1/9/13”}，
{“key”：“DJ”，“value”：0，“date”：“1/10/13”}，
{“key”：“DJ”，“value”：1，“date”：“1/11/13”}，
{“key”：“DJ”，“value”：1，“date”：“1/12/13”}，
{“key”：“MS”，“value”：0，“date”：“1/8/13”}，
{“key”：“MS”，“value”：1，“date”：“1/9/13”}，
{“key”：“MS”，“value”：1，“date”：“1/10/13”}，
{“key”：“MS”，“value”：1，“date”：“1/11/13”}，
{“key”：“MS”，“value”：1，“date”：“1/12/13”}，
{“key”：“RC”，“value”：0，“date”：“1/8/13”}，
{“key”：“RC”，“value”：1，“date”：“1/9/13”}，
{“key”：“RC”，“value”：1，“date”：“1/10/13”}，
{“key”：“RC”，“value”：1，“date”：“1/11/13”}，
{“key”：“RC”，“value”：1，“date”：“1/12/13”}，
{“键”：“CG”，“值”：0，“日期”：“1/8/13”}，
{“key”：“CG”，“value”：0，“date”：“1/9/13”}，
{“key”：“CG”，“value”：0，“date”：“1/10/13”}，
{“key”：“CG”，“value”：0，“date”：“1/11/13”}，
{“key”：“CG”，“value”：1，“date”：“1/12/13”}，
{“key”：“RI”，“value”：0，“date”：“1/8/13”}，
{“key”：“RI”，“value”：0，“date”：“1/9/13”}，
{“key”：“RI”，“value”：0，“date”：“1/10/13”}，
{“key”：“RI”，“value”：0，“date”：“1/11/13”}，
{“key”：“RI”，“value”：1，“date”：“1/12/13”}
]
图表（数据，粉红色）；
var datearray=[]；
var colorrange=[]；
功能图（数据、颜色）{
如果（颜色=“蓝色”）{
颜色范围=[“045A8D”、“2B8CBE”、“74A9CF”、“A6BDDB”、“D0D1E6”、“F1EEF6”]；
}
否则如果（颜色=“粉色”）{
颜色范围=[“980043”、“DD1C77”、“DF65B0”、“C994C7”、“D4B9DA”、“F1EEF6”]；
}
else if（颜色=“橙色”）{
颜色范围=[“B30000”、“E34A33”、“FC8D59”、“FDBB84”、“FDD49E”、“FEF0D9]；
}
strokecolor=颜色范围[0]；
var format=d3.time.format（“%m/%d/%y”）；
var-margin={顶部：20，右侧：40，底部：30，左侧：30}；
var width=document.body.clientWidth-margin.left-margin.right；
变量高度=400-margin.top-margin.bottom；
变量工具提示=d3。选择（“主体”）
.附加（“div”）
.attr（“类”、“删除”）
.style（“位置”、“绝对”）
.风格（“z指数”、“20”）
.style（“可见性”、“隐藏”）
.样式（“顶部”、“30px”）
.样式（“左”、“55px”）；
var x=d3.time.scale（）
.范围（[0，宽度]）；
变量y=d3.scale.linear（）
.范围（[高度-10,0]）；
var z=d3.scale.ordinal（）
.范围（颜色范围）；
var xAxis=d3.svg.axis（）
.比例（x）
.orient（“底部”）
.滴答声（d3.时间.周）；
var yAxis=d3.svg.axis（）
.比例（y）；
var yAxisr=d3.svg.axis（）
.比例（y）；
var stack=d3.layout.stack（）
.偏移量（“轮廓”）
.values（函数（d）{返回d.values；}）
.x（函数（d）{返回d.date；}）
.y（函数（d）{返回d.value；}）；
var nest=d3.nest（）
.key（函数（d）{返回d.key；}）；
var area=d3.svg.area（）
.插入（“线性”）
.x（函数（d）{返回x（d.date）；}）
.y0（函数（d）{返回y（d.y0）；}）
.y1（函数（d）{返回y（d.y0+d.y）；}）；
var svg=d3。选择（“.chart”）。追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
data.forEach（函数（d）{
d、 日期=format.parse（d.date）；
d、 值=+d.值；
});
var层=堆栈（nest.entries（data））；
x、 域（d3.extent（数据，函数（d）{返回d.date；}））；
y、 域（[0，d3.max（数据，函数（d）{返回d.y0+d.y；}）]；
svg.selectAll（“.layer”）
.数据（图层）
.enter（）.append（“路径”）
.attr（“类”、“层”）
.attr（“d”，函数（d）{返回区域（d.values）；}）
.style（“fill”，函数（d，i）{返回z（i）；}）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.attr（“变换”、“平移”（+width+），0）
.call（yAxis.orient（“右”）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis.orient（“左”）；
svg.selectAll（“.layer”）
.attr（“不透明度”，1）
.on（“鼠标悬停”，功能（d，i）{
svg.selectAll（“.layer”）.transition（）
.持续时间（250）
.attr（“不透明度”，函数（d，j）{
返回j！=i？0.6:1；
})})
.on（“mousemove”，函数（d，i）{
mousex=d3.鼠标（this）；
mousex=mousex[0]；
var逆变器dx=x.invert（mousex）；
invertDX=invertDX.getMonth（）+invertDX.getDate（）；
所选var=（d.值）；
对于（var k=0；k“+pro+”
”）。样式（“可见性”、“可见”）；
})
.on（“mouseout”，函数（d，i）{
svg.selectAll（“.layer”）
.transition（）
.持续时间（250）
.attr（“不透明度”、“1”）；
d3.选择（本）
.classed（“悬停”，假）
<div class="chart">

// Adapted from https://gist.github.com/WillTurman/4631136
var data = [
    {"key":"DJ","value":0,"date":"1/8/13"},
    {"key":"DJ","value":0,"date":"1/9/13"},
    {"key":"DJ","value":0,"date":"1/10/13"},
    {"key":"DJ","value":1,"date":"1/11/13"},
    {"key":"DJ","value":1,"date":"1/12/13"},
    {"key":"MS","value":0,"date":"1/8/13"},
    {"key":"MS","value":1,"date":"1/9/13"},
    {"key":"MS","value":1,"date":"1/10/13"},
    {"key":"MS","value":1,"date":"1/11/13"},
    {"key":"MS","value":1,"date":"1/12/13"},
    {"key":"RC","value":0,"date":"1/8/13"},
    {"key":"RC","value":1,"date":"1/9/13"},
    {"key":"RC","value":1,"date":"1/10/13"},
    {"key":"RC","value":1,"date":"1/11/13"},
    {"key":"RC","value":1,"date":"1/12/13"},
    {"key":"CG","value":0,"date":"1/8/13"},
    {"key":"CG","value":0,"date":"1/9/13"},
    {"key":"CG","value":0,"date":"1/10/13"},
    {"key":"CG","value":0,"date":"1/11/13"},
    {"key":"CG","value":1,"date":"1/12/13"},
    {"key":"RI","value":0,"date":"1/8/13"},
    {"key":"RI","value":0,"date":"1/9/13"},
    {"key":"RI","value":0,"date":"1/10/13"},
    {"key":"RI","value":0,"date":"1/11/13"},
    {"key":"RI","value":1,"date":"1/12/13"}
]

chart(data, "pink");

var datearray = [];
var colorrange = [];

function chart(data, color) {

  if (color == "blue") {
    colorrange = ["#045A8D", "#2B8CBE", "#74A9CF", "#A6BDDB", "#D0D1E6", "#F1EEF6"];
  }
  else if (color == "pink") {
    colorrange = ["#980043", "#DD1C77", "#DF65B0", "#C994C7", "#D4B9DA", "#F1EEF6"];
  }
  else if (color == "orange") {
    colorrange = ["#B30000", "#E34A33", "#FC8D59", "#FDBB84", "#FDD49E", "#FEF0D9"];
  }
  strokecolor = colorrange[0];

  var format = d3.time.format("%m/%d/%y");

  var margin = {top: 20, right: 40, bottom: 30, left: 30};
  var width = document.body.clientWidth - margin.left - margin.right;
  var height = 400 - margin.top - margin.bottom;

  var tooltip = d3.select("body")
      .append("div")
      .attr("class", "remove")
      .style("position", "absolute")
      .style("z-index", "20")
      .style("visibility", "hidden")
      .style("top", "30px")
      .style("left", "55px");

  var x = d3.time.scale()
      .range([0, width]);

  var y = d3.scale.linear()
      .range([height-10, 0]);

  var z = d3.scale.ordinal()
      .range(colorrange);

  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom")
      .ticks(d3.time.weeks);

  var yAxis = d3.svg.axis()
      .scale(y);

  var yAxisr = d3.svg.axis()
      .scale(y);

  var stack = d3.layout.stack()
      .offset("silhouette")
      .values(function(d) { return d.values; })
      .x(function(d) { return d.date; })
      .y(function(d) { return d.value; });

  var nest = d3.nest()
      .key(function(d) { return d.key; });

  var area = d3.svg.area()
      .interpolate("linear")
      .x(function(d) { return x(d.date); })
      .y0(function(d) { return y(d.y0); })
      .y1(function(d) { return y(d.y0 + d.y); });

  var svg = d3.select(".chart").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 + ")");


  data.forEach(function(d) {
    d.date = format.parse(d.date);
    d.value = +d.value;
  });

  var layers = stack(nest.entries(data));

  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);

  svg.selectAll(".layer")
      .data(layers)
    .enter().append("path")
      .attr("class", "layer")
      .attr("d", function(d) { return area(d.values); })
      .style("fill", function(d, i) { return z(i); });


  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + width + ", 0)")
      .call(yAxis.orient("right"));

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis.orient("left"));

  svg.selectAll(".layer")
    .attr("opacity", 1)
    .on("mouseover", function(d, i) {
      svg.selectAll(".layer").transition()
      .duration(250)
      .attr("opacity", function(d, j) {
        return j != i ? 0.6 : 1;
    })})

    .on("mousemove", function(d, i) {
      mousex = d3.mouse(this);
      mousex = mousex[0];
      var invertedx = x.invert(mousex);
      invertedx = invertedx.getMonth() + invertedx.getDate();
      var selected = (d.values);
      for (var k = 0; k < selected.length; k++) {
        datearray[k] = selected[k].date
        datearray[k] = datearray[k].getMonth() + datearray[k].getDate();
      }

      mousedate = datearray.indexOf(invertedx);
      pro = d.values[mousedate].value;

      d3.select(this)
      .classed("hover", true)
      .attr("stroke", strokecolor)
      .attr("stroke-width", "0.5px"), 
      tooltip.html( "<p>" + d.key + "<br>" + pro + "</p>" ).style("visibility", "visible");

    })
    .on("mouseout", function(d, i) {
     svg.selectAll(".layer")
      .transition()
      .duration(250)
      .attr("opacity", "1");
      d3.select(this)
      .classed("hover", false)
      .attr("stroke-width", "0px"), tooltip.html( "<p>" + d.key + "<br>" + pro + "</p>"     ).style("visibility", "hidden");
    })

    var vertical = d3.select(".chart")
        .append("div")
        .attr("class", "remove")
        .style("position", "absolute")
        .style("z-index", "19")
        .style("width", "1px")
        .style("height", "380px")
        .style("top", "10px")
        .style("bottom", "30px")
        .style("left", "0px")
        .style("background", "#fff");

    d3.select(".chart")
      .on("mousemove", function(){  
         mousex = d3.mouse(this);
         mousex = mousex[0] + 5;
         vertical.style("left", mousex + "px" )})
      .on("mouseover", function(){  
         mousex = d3.mouse(this);
         mousex = mousex[0] + 5;
         vertical.style("left", mousex + "px")});
    }