Javascript D3水平条形图

我是d3.js的新手，我正在尝试做一个水平条形图

我不知道在数据集发生变化时，在哪里放置一些变量或进行动态计算

这是我的密码：

xaxis.域{ 填充：无； 行程：D3； } xaxis文本， 雅克西斯语篇{ 字体大小：12px； } var w=1224； 变量类别=[布宜诺斯艾利斯自治城市司法部-福罗PCyF，布宜诺斯艾利斯自治城市司法部-福罗卡伊，国际会议前：墨西哥普埃布拉青少年宣讲会，2014年”，《刑法改革》，普罗斯图科莫·科莫·特马·普布利卡（ción como tema de Política Pública），Discapacidad:Derecho a un Trato Adecuado，Jornada sobre Reforma y y y y y y y Proceso，Manipulaciones Judicials de los varones violentos…icación de sus tácticas contacto de contacto，Teorías de Género，Tiorías de Género，Higher de trabajor de Justicia a pera de Género-protos de Protoc，Delito刑事诉讼中的数字证据、婚姻关系和家庭多样性：立法和司法委员会、司法鉴定委员会：司法机构的先例和影响、新法律和医学暴力、梅萨雷东达：司法机构和司法中心：跨竞争会议]； 风险值美元=[328325,95,83,65,56,55,54,53,41,37,37,36,35,34,31] 变量颜色=['0000b4'，'0082ca'，'0094ff'，'0d4bcf'，'0066AE'，'074285'，'00187B'，'285964'，'405F83'，'416545'，'4D7069'，'6E9985'，'7EBC89'，'0283AF'，'79BCBF'，'99C19E']； var grid=d3.range25.mapfunctioni{ 返回{ “x1”：0， “y1”：0， “x2”：0， ‘y2’：480 }; }; var tickVals=grid.mapfunctiond，i{ 如果i>0{ 返回i*10； }否则，如果i==0{ 返回100； } }; var xscale=d3.scale.linear .domain[0，d3.max$，已运行{ 返回d； }] .范围[0，w]； var yscale=d3.scale.linear .domain[0，categories.length] .范围[0480]； var colorScale=d3.scale.quantize .domain[0，categories.length] .颜色； 变量画布=d3。选择“图表” .append'svg' 艾特先生{ “宽度”：w， ‘高度’：550 }; var grids=canvas.append'g' .attr'id'，'grid' .attr'transform'，'translate600,10' .选择所有“行” .数据网格 进来 .附加“行” 艾特先生{ “x1”：函数化，i{ 返回i*30； }, “y1”：函数化{ 返回d.y1； }, “x2”：函数化，i{ 返回i*30； }, “y2”：函数{ 返回d.y2； }, } .风格{ “笔划”：“阿达达”， “笔划宽度”：“1px” }; var xAxis=d3.svg.axis； xAxis .东方“底部” .scalexscale； //.5； //.tickValuestickVals； var yAxis=d3.svg.axis； 亚克斯 .东方“左” .鳞片鳞片 .滴答声2 .滴答滴答，我{ 返回类别[i]； } .tickValuesd3.17； var y_xis=canvas.append'g' .attrtransform，translate600,35 .attr'id'，'yaxis' .callyAxis； var x_xis=canvas.append'g' .attransform，translate600500 .attr'id'，xaxis' .callxAxis； var chart=canvas.append'g' .attrtransform，translate600,10 .attr'id'，'bar' .选择All'rect' .数据美元 进来 .append'rect' .attr'height'，19 艾特先生{ “x”：0， “y”：功能正常，i{ 返回yscalei+19； } } .样式'fill'，函数，i{ 返回“6AA6D6” }//彩色标度； .attr'width'，函数d{ 返回0； }; var transit=d3.selectsvg.selectAllrect .数据美元 过渡 .持续时间1000 .attrwidth，函数d{ 返回xscaled； }; var TransitText=d3。选择“条” .选择所有“文本” .数据美元 进来 .append'text' 艾特先生{ “x”：函数化{ 返回xscaled/2.2； }, “y”：功能正常，i{ 返回yscalei+35； } } .textfunctiond{ 返回d； }.风格{ “填充”：“ffff”， “字体大小”：“14px” };

---

在d3中，一个中心概念是数据连接。正是这种连接允许您将数据绑定到可视化，并在底层数据更改时保持可视化持久性

你所拥有的一切都很好，但我猜你想知道如何使它成为动态的。你可以用不同的底层数据多次调用“图表定义代码”，使它成为动态的

您最终会得到如下结果：

var data = dollars; // or whatever your core data is.

function draw(data) {
  // all the d3 code from your example. This is the chart definition.
}

// draw the first iteration of the chart
draw(data);

// data changes
draw(data);

// data changes
draw(data);

---

有意义吗？

你能解释一下，到目前为止，有什么东西没有按照你所希望的方式工作吗？我认为是刻度，不知道应该在刻度上放置什么来动态地执行此操作。我将添加一个工作代码，但它没有按照我所希望的方式工作。x轴与矩形不同。如果你看到这个示例，那么 e第一个横条比刻度大，刻度上显示150，横条是328。我的意思是，我没有硬核一些变量，但不知道哪些。。。