Javascript 返回格式时间（d.date）}） //.attr（'text-anchor'，'middle'） .attr（“类别”、“日期”）； 函数换行（文本、宽度）{ text.each（函数（）{ 变量文本=d3。选择（此）， words=text.text（）.split（/\s+/）.reverse（）， 单词 行=[]， 行号=0， 线宽=1.1，//ems y=text.attr（“y”）， dy=parseFloat（text.attr（“dy”））， tspan=text.text（null）.append（“tspan”）.attr（“x”，0）.attr（“y”，y）.attr（“dy”，dy+“em”）； while（word=words.pop（））{ 行。推（字）； tspan.text（line.join（“”））； if（tspan.node（）.getComputedTextLength（）>width）{ line.pop（）； tspan.text（line.join（“”））； 行=[字]； tspan=text.append（“tspan”）.attr（“x”，0）.attr（“y”，y）.attr（“dy”，++lineNumber*lineHeight+dy+“em”）.text（word）； } } }); } graphGroup.selectAll（'.labelText'）） .data（data.filter（函数（d）{return d.pulty==false}）） .attr（'class'，'labelText'） .输入（） .append（'文本'） .attr（'x'，函数（d）{返回时间刻度（d.date）-125}） .attr（'y'，函数（d，i）{ 如果（i%2）{ 返回50+20； }否则{ 返回高度/2+20； } }) .text（函数（d）{返回d.summary}） .style（'font-size'，'12px'）； d3.选择全部（'.labelText'）） .电话（wrap，120） 文本{ 字体系列：Tw Cen MT； } .日期{ 字号：18px； 绘画顺序：笔画； 冲程：#fff； 笔画宽度：3px； 笔划线头：对接； 笔划线条连接：斜接； 字号：800； }

您这里的主要问题是，您将类设置在enter方法之前：

graphGroup.selectAll('.labelText')
    .data(data.filter(function(d) {return d.penalty==false}))
    .attr('class', 'labelText')
    .enter()
    .append('text')
    //etc...

应该是：

graphGroup.selectAll('.labelText')
  .data(data.filter(function(d) {
    return d.penalty == false
  }))
  .enter()
  .append('text')
  .attr('class', 'labelText')
  //etc...

因此，您的

d3.selectAll（'.labelText'）

为空（即其

size（）

为零）

然后，我们必须进行一些小的调整以使用

wrap

功能：

将

文本锚定

设置为

结束

，并移除

x

位置的填充物

在

wrap

函数中，获取文本的

x

位置

x = text.attr("x")

并在tspans中使用它们：

.attr("x", x)

以下是您的更新片段：

var页边距={
前20名，
左:50,，
底数：100，
右：20
};
var宽度=1200；
var高度=500；
var totalWidth=宽度+边距.left+边距.right；
var totalHeight=高度+页边距.top+页边距.bottom；
var svg=d3.select（'body'）
.append（'svg'）
.attr（'width'，totalWidth）
.attr（“高度”，总高度）；
var graphGroup=svg.append（'g'）
.attr（'transform'，'translate（“+margins.left+”，“+margins.top+”）；
var rawData=[{
“日期”：2018年12月2日，
“监管机构”：“CBIRC”，
"罚":假,，
“总结”：“最终确定的银行财富管理子公司规则允许股权投资”
},
{
“日期”：2018年11月28日，
“监管机构”：“中国证监会”，
"罚":假,，
“摘要”：经纪公司的零售目标、集合资产管理产品需要遵循共同基金标准
},
{
“日期”：2018年12月14日，
“监管机构”：“中国证监会”，
"罚":假,，
“总结”：“监管机构发布窗口指导，阻止金融市场公司促进养老基金的短期业绩”
},
{
“日期”：2018年12月19日，
“监管机构”：“中国证监会”，
"罚":假,，
“摘要”：“中国证监会发布信息技术交易规则”
},
{
“日期”：2018年12月25日，
“调节器”：“AMAC”，
"罚":假,，
“总结”：“AMAC发布债券交易指南”
},
{
“日期”：2019年1月11日，
‘监管者’：‘深交所’，
"罚":假,，
“总结”：“深交所修改某些ETF的交易规则”
},
{
“日期”：2019年1月18日，
“监管机构”：“中国证监会”，
"罚":假,，
“总结”：中国证监会发布共同基金投资信息信用衍生工具指南，而美国证券交易委员会发布附属估值指南
},
{
“日期”：2019年1月26日，
“监管机构”：“中国证监会”，
"罚":假,，
"总结":"任命易惠曼为中国证监会党委书记,主席"
},
{
“日期”：2019年1月28日，
“监管机构”：“中国证监会”，
"罚":假,，
“总结”：中国证监会发布了新技术创新委员会的规则草案，该委员会将与基于注册的IPO系统配套使用
},
{
“日期”：2019年1月22日，
“监管机构”：“中国证监会”，
"罚":对,，
“总结”：“中国证监会处罚的几家第三方基金分销机构不符合分销和报告规定”
},
{
“日期”：2019年1月31日，
“监管者”：中国人民银行，
"罚":对,，
“总结”：“中国人民银行因错误处理客户信息而处罚中国工商银行瑞士信贷”
}
];
var parseDate=d3.timeParse（“%b-%d-%Y”）；
var formatTime=d3.timeFormat（“%b%d，%Y”）；
var data=rawData.map（函数（d）{
返回{
日期：解析日期（d.date），
调节器：d.调节器，
惩罚：d.惩罚，
摘要：d.摘要
}
});
数据排序（函数（x，y）{
返回d3.升序（x.日期，y.日期）；
});
//var最早=d3.min（data.map（d=>d.date））；
//var latest=d3.max（data.map（d=>d.date））；
var dateMin=d3.min（数据，函数（d）{
返回d3.timeDay.offset（d.date，-10）；
});
var dateMax=d3.max（数据，函数（d）{
返回d3.timeDay.offset（d.date，+10）；
});
var timeScale=d3.scaleTime（）
.domain（[dateMin，dateMax]）
.范围（[0，宽度]）；
var colorMap={
“中国证监会”：“003366”，
“CBIRC”：“e4a733”，
“AMAC”：“95b3d7”，
"SZSE":#b29866"，
“中国人民银行”：“366092”
};
var defs=svg.append（'svg:defs'）；
var fillURL=“Fills/gray-1-crosshatch.svg”；
defs.append（“svg:pattern”）
.attr（“id”、“灰色阴影”）
.attr（“宽度”，10）
.attr（“高度”，10）
.attr（“patternUnits”、“userSpaceOnUse”）
.append（“svg:image”）
.attr（“xlink:href”，fillURL）
.attr（“宽度”，10）
.attr（“高度”，10）
.attr（“x”，0）
.attr（“y”，0）；
graphGroup.append（'rect'）
.attr（'width'，width）
.attr（'height'，80）
.attr（'x'，0）
.attr（'y'，高度*.75