Javascript d3制作一张周和小时的条形图，并将项目设置在正确的位置

我正在用D3.js制作一个条形图，我对它完全陌生

我有两个问题

问题1: 我想要一个条形图，其中X轴有不同的星期（未来6周）和每个星期之间 有40个小时见下图：

问题2

im以后如何在条形图中的正确位置执行3个订单：

• 订单1：开始时间：第46周和第39小时
• 顺序2：第45周开始，第46周结束43小时
• 顺序3：从第45周开始，第48周结束126小时

我尝试了一些，并使用以下Json数据数组成功解析了Weeks和Order，但无法：

PHP:

//Hours
$hours = array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40);
//Weekdays
$week = array(
        0 => array("week" => 45,
                   'hours' => $hours
                ),
        1 => array("week" => 46,
                    'hours' => $hours
                ),
        2 => array("week" => 47,
                    'hours' => $hours
                ),
        3 => array("week" => 48,
                    'hours' => $hours
                ),
        4 => array("week" => 49,
                    'hours' => $hours
                ),
);

$json_weekdays = json_encode($week);
$json_hours = json_encode($hours);
$json_plannedOrder = json_encode($plannedOrder);

Javascript

var weekdays = <?= $json_weekdays; ?>;
let hours = <?= $json_hours; ?>;
var data = <?= $json_plannedOrder; ?>;

// set the dimensions and margins of the graph
var margin = {top: 20, bottom: 30, left: 50, right: 50},
    width = 1050,
    height = 500 - (margin.top - margin.bottom);


var svg = d3.select("#dashboard-order")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("transform", "translate(0,0)");

// Scale the range of the data in the domains
var xScale = d3.scalePoint()
    .domain(weekdays.map(function(w){
            return w.week;
        })
    )
    .range([0, width])
    .padding(0);

var yScale = d3.scaleBand()
    .domain(data.map(function(d){ return d.Order.order_id }))
    .range([0, height])
    .padding(1);

// Bars anzeigen
// append the rectangles for the bar chart

svg.selectAll(".bar")
    .data(data)
    .enter()
    .append("rect")
    .attr("class", "bar")
    .attr("transform", function(d) {
        return "translate("+ xScale( d.Order.week ) +",0)"; 
    })
    .attr("width", function(d) { 
        return xScale( d.Order.hours ); 
    } )
    .attr("y", function(d) { return yScale(d.Order.order_id); })
    .attr("height", "50");

//append X Scale
svg.append("g")
    .call(d3.axisTop(xScale))
    .attr("transform",  "translate(0," + margin.top + ")");

//append Y Scale
svg.append("g")
    .call(d3.axisRight(yScale))
    .attr("transform",  "translate(0," + margin.top + ")");

var工作日=；
让小时=；
var数据=；
//设置图形的尺寸和边距
var margin={顶部：20，底部：30，左侧：50，右侧：50}，
宽度=1050，
高度=500-（页边距.顶部-页边距.底部）；
var svg=d3。选择（“仪表板顺序”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.attr（“转换”、“翻译（0,0）”）；
//缩放域中数据的范围
var xScale=d3.scalePoint（）
.domain（工作日.map）（函数（w）{
返回w周；
})
)
.范围（[0，宽度]）
.填充（0）；
var yScale=d3.scaleBand（）
.domain（data.map（函数（d）{return d.Order.Order_id}））
.范围（[0，高度]）
.填充（1）；
//酒吧
//为条形图添加矩形
svg.selectAll（“.bar”）
.数据（数据）
.输入（）
.append（“rect”）
.attr（“类”、“条”）
.attr（“转换”，函数（d）{
返回“translate（“+xScale（d.Order.week）+”，0）”；
})
.attr（“宽度”，函数（d）{
返回xScale（d.Order.hours）；
} )
.attr（“y”，函数（d）{return yScale（d.Order.Order_id）；}）
.attr（“高度”、“50”）；
//附加X刻度
svg.append（“g”）
.call（d3.axisTop（xScale））
.attr（“转换”、“转换（0）”+margin.top+”）；
//附加Y刻度
svg.append（“g”）
.call（d3.axisRight（yScale））
.attr（“转换”、“转换（0）”+margin.top+”）；

---

我需要做些什么来显示周与周之间的小时数，并将周与小时数的顺序设置在正确的位置？

我已经得到了解决方案，我已经改变了结构，每周都在这些解决方案中设置了40个小时，例如

n（周）*40

所以D3知道横杆必须进入X轴的哪个点，我将Week数组更改为以下结构：

0: {isAWeek: 1, weekCalender: "45", hour: 0}
1: {isAWeek: 0, hour: 1}
2: {isAWeek: 0, hour: 2}
3: {isAWeek: 0, hour: 3}
4: {isAWeek: 0, hour: 4}
5: {isAWeek: 0, hour: 5}
6: {isAWeek: 0, hour: 6}
7: {isAWeek: 0, hour: 7}
8: {isAWeek: 0, hour: 8}
9: {isAWeek: 0, hour: 9}
10: {isAWeek: 0, hour: 10}
11: {isAWeek: 0, hour: 11}
12: {isAWeek: 0, hour: 12}
13: {isAWeek: 0, hour: 13}
14: {isAWeek: 0, hour: 14}
15: {isAWeek: 0, hour: 15}
16: {isAWeek: 0, hour: 16}
17: {isAWeek: 0, hour: 17}
18: {isAWeek: 0, hour: 18}
19: {isAWeek: 0, hour: 19}
20: {isAWeek: 0, hour: 20}
21: {isAWeek: 0, hour: 21}
22: {isAWeek: 0, hour: 22}
23: {isAWeek: 0, hour: 23}
24: {isAWeek: 0, hour: 24}
25: {isAWeek: 0, hour: 25}
26: {isAWeek: 0, hour: 26}
27: {isAWeek: 0, hour: 27}
28: {isAWeek: 0, hour: 28}
29: {isAWeek: 0, hour: 29}
30: {isAWeek: 0, hour: 30}
31: {isAWeek: 0, hour: 31}
32: {isAWeek: 0, hour: 32}
33: {isAWeek: 0, hour: 33}
34: {isAWeek: 0, hour: 34}
35: {isAWeek: 0, hour: 35}
36: {isAWeek: 0, hour: 36}
37: {isAWeek: 0, hour: 37}
38: {isAWeek: 0, hour: 38}
39: {isAWeek: 0, hour: 39}
40: {isAWeek: 1, weekCalender: "46", hour: 40}
41: {isAWeek: 0, hour: 41}
42: {isAWeek: 0, hour: 42}
....

通过这种结构，我可以标记哪一小时是新的一周，并且可以在X刻度中定义当他用isAWeek==1点击该数据时，他显示该周并继续小时点：

//append X Scale
svg.append("g")
    .call(
        d3.axisTop(xScale).tickFormat( function(w, i) {
            if( weekdays[i].isAWeek == 1 ) {
                return weekdays[i].weekCalender;
            } else {
                return "";
            }  
        })
    );

---

请每个问题问一个问题，否则，如果有人只能回答一部分，他们可能会觉得回答整个问题不舒服。另外，请将您的代码转换为一个，并提供一些示例数据。请看！