D3.js 平滑滚动画笔，带有类似缩放键的字符串标签

问题：使用缩放键无法使用笔刷平滑平移

下面是一个在x轴上使用日期进行平滑平移的示例

但这仅在x域连续时有效

使用linearscale，我想用数据d.name中的字符串替换x轴上的值。问题是缩放时，会在值之间创建新的记号。例如，缩放时的值1和2将生成1、1.5、2和2.5等的值和TCIK。这意味着名称不再匹配

这可以通过两件事来解决

防止放大时出现新的记号。我不知道怎么做

将x轴刻度上的每个标签替换为数据中的d.name

这是我的尝试

var xAxis = d3.axisBottom(x)
    .tickFormat(function(d, i) {
      label = data[i].name;
      local.set(this, data[i].name);
      return "test";
      return data[i].name;
      return label;
      return i;
      return d;
    });

这些都不管用

普朗克

---

在

tickFormat

函数中，检查数字勾号是否对应于

数据

数组中的任何值。如果是，则返回

名称

，否则不返回任何内容：

var xAxis = d3.axisBottom(x)
    .tickFormat(function(d) {
        var found = data.find(function(e){
            return e.num === d
        });
        return found ? found.name : null; 
    })

以下是更改后的代码：

身体{
字体系列：avenir next，无衬线；
字体大小：12px；
}
.zoom{
光标：移动；
填充：无；
指针事件：全部；
}
.安讯士{
笔划宽度：0.5px；
冲程：#888；
字体：10px avenir next，无衬线；
}
.轴>路径{
冲程：#888；
}
/*改编自：https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172 */
风险值数据=[{
“姓名”：“A”，
“日期”：“2016-11-09 11:15”，
“num”：“1”，
“距离”：“1900”
},
{
“名称”：“B”，
“日期”：“2016-11-10 10:40”，
“num”：“2”，
“距离”：“1500”
},
{
“姓名”：“C”，
“日期”：“2016-11-11 16:45”，
“num”：“3”，
“距离”：“2500”
},
{
“名称”：“D”，
“日期”：“2016-11-12 12:48”，
“num”：“4”，
“距离”：“2300”
},
{
“名称”：“E”，
“日期”：“2016-11-15 20:00”，
“num”：“5”，
“距离”：“2000”
}
];
var保证金={
前20名，
右:20,，
底部：90，
左：50
},
边缘2={
排名：230，
右:20,，
底数：30，
左：50
},
宽度=960-margin.left-margin.right，
高度=300-margin.top-margin.bottom，
高度2=300-margin2.top-margin2.bottom；
var parseTime=d3.timeParse（“%Y-%m-%d%H:%m”）；
var local=d3.local（）；
var x=d3.scaleLinear（）.range（[0，宽度]），
x2=d3.scaleLinear（）.range（[0，宽度]），
y=d3.scaleLinear（）.range（[height，0]），
y2=d3.scaleLinear（）.range（[height2，0]）；
//dur=d3.scaleLinear（）.range（[0,12]）；
变量标签=['a'，'b'，'c'，'d']；
var newData=[]；
data.forEach（函数（e）{
newData.push({
“姓名”：即姓名
});
});
//var xAxis=d3.axisBottom（x）.tickSize（0）；
var xAxis2=d3.axisBottom（x2）.tickSize（0）
.d格式（函数（d）{
var found=data.find（函数（e）{
返回e.num==d
});
返回找到？找到。名称：空；
})
yAxis=d3。轴左（y）。tickSize（0）；
var xAxis=d3.axisBottom（x）
.d格式（函数（d）{
var found=data.find（函数（e）{
返回e.num==d
});
如果（！找到）{
d3.select（this.parentNode）.select（“行”）.remove（）
}
返回找到？找到。名称：空；
})
//var xAxis=d3.axisBottom（x）
//.1格式（函数（d，i）{
//label=数据[i]。名称；
//local.set（此，数据[i].name）；
//返回“测试”；
//返回数据[i]。名称；
//退货标签；
//返回i；
//返回d；
//   });
var brush=d3.brushX（）
.范围([
[0, 0],
[宽度、高度2]
])
.on（“开始刷结束”，刷过）；
var zoom=d3.zoom（）
.scaleExtent（[1,10]）
.翻译范围([
[0, 0],
[宽度、高度]
])
.范围([
[0, 0],
[宽度、高度]
])
。打开（“缩放”，缩放）；
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+”）；
//d3.json（“data.json”），函数（错误，数据）{
//如果（错误）抛出错误；
var parseTime=d3.timeParse（“%Y-%m-%d%H:%m”）；
var mouseoverTime=d3.timeFormat（“%a%e%b%Y%H:%M”）；
var minTime=d3.timeFormat（“%b%e，%Y”）；
var parseDate=d3.timeParse（“%b%Y”）；
data.forEach（函数（d）{
d、 距离=+d.距离；
d、 num=+d.num；
返回d；
},
函数（错误、数据）{
如果（错误）抛出错误；
});
var合计=0；
data.forEach（函数（d）{
总计=d.距离+总计；
});
var minDate=d3.min（数据，函数（d）{
返回d.num；
});
var xMin=d3.min（数据，函数（d）{
返回d.num；
});
var yMax=Math.max（20，d3.max）（数据，函数（d）{
返回d.距离；
}));
x、 域（[xMin，d3.max（数据，函数（d））{
返回d.num；
})]);
y、 域（[0，yMax]）；
x2.域（x.域（））；
y2.域（y.域（））；
var rects=focus.append（“g”）；
attr（“剪辑路径”、“url（#剪辑）”）；
rects.selectAll（“rects”）
.数据（数据）
.enter（）.append（“rect”）
.样式（“填充”，功能（d）{
返回“#8DA5ED”；
})
.attr（“类”、“矩形”）
.attr（“x”，函数（d）{
返回x（d.num）；
})
.attr（“y”，函数（d）{
返回y（d.距离）；
})
.attr（“宽度”，函数（d）{
返回10；
})
.attr（“高度”，功能（d）{
返回高度-y（d距离）；
});
focus.append（“g”）
在