Question

我正在使用JSON格式的一些患者数据，其日期对应于他们特定的药物使用间隔和他们经历不良事件的日子。我想要类似于泳道图表底部的内容（http://bl.ocks.org/bunkat/1962173），因为我无需放大或刷时间线。

这是applet的图片，目前正在运行我正在尝试实现的目标，但我们正试图摆脱applet，原因很明显。绿色三角形是试验的开始和结束，紫色三角形是不良事件日期，您看到的间隔是药物摄入间隔： Patient Visualization

以下是我正在使用的一些模拟数据的示例

[{
"PATIENT_ID": 28079,
"CLINICAL_START_DATE": "2002-02-19",
"CLINICAL_END_DATE": "2003-08-14",
"DRUG_START_DATES": "[2002-05-28]",
"DRUG_END_DATES": "[2002-09-01]",
"CONDITION_DATES": "[2002-08-19]"
},
{
"PATIENT_ID": 33565,
"CLINICAL_START_DATE": "2002-07-28",
"CLINICAL_END_DATE": "2004-06-20",
"DRUG_START_DATES": "[2002-09-12, 2002-10-16, 2003-12-24, 2003-01-10, 2003-11-13, 2003-03-18, 2003-06-08]",
"DRUG_END_DATES": "[2002-09-12, 2002-11-15, 2004-05-27, 2003-01-31, 2003-11-13, 2003-05-02, 2003-10-03]",
"CONDITION_DATES": "[2002-09-24, 2002-12-29, 2003-04-25, 2003-06-25, 2003-08-25, 2003-10-25]"
},
{
"PATIENT_ID": 59782,
"CLINICAL_START_DATE": "2002-11-28",
"CLINICAL_END_DATE": "2007-05-14",
"DRUG_START_DATES": "[2003-07-16, 2003-10-21, 2003-12-20]",
"DRUG_END_DATES": "[2003-08-20, 2003-11-04, 2004-02-02]",
"CONDITION_DATES": "[2003-09-13]"
}]

药物开始日期和结束日期数组的索引彼此对应，这意味着DRUG_START_DATE [0]对应于DRUG_END_DATE [0]。条件日期只是时间轴上的点。我对D3.js很新，并且无法找到任何处理时间间隔的水平图表。

我试图让矩形符合时间间隔，但我不确定如何访问DRUG_START_DATES和DRUG_END_DATES数组中的每个日期，以使它们绑定到每个矩形。

这是我到目前为止的一些代码。如果你使用console.log d.CLINICAL_START_DATE，CLINICAL_END_DATE等，那么你将获得与2000年1月1日相关的天数。我认为使用整数对于长度的矩形可能更容易，但如果你知道一种使用方法日期对象，要做同样的事情，你可以改变方法，只返回parser.parse方法输出而不是减去。

<!DOCTYPE html>

<html>

<head>

<title></title>

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3-time.v1.min.js"></script>
<script src="d3-timeline.js"></script>
<style>
.axis path, .axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}

.axis text {
font-family: sans-serif;
font-size: 11px;
}
.container {
height: 225px;
width: 175px;
border:2px solid #000;
overflow-y: scroll;
overflow-x: hidden;
}

svg {
display: block;
width: 200%;
height: 200%;
}
</style>
</head>

<body>
<script>
    var parser = d3.time.format("%Y-%m-%d");
    var w = 600;
    var h = 600;
    var data = 
    d3.json("Data/patientDataSepDates.json", function(data) {
        data.forEach(function(d) {

            var fixedStartDates = d.DRUG_START_DATES.substring(1, d.DRUG_START_DATES.length-1).split(", ");
            var fixedEndDates = d.DRUG_END_DATES.substring(1, d.DRUG_END_DATES.length-1).split(", ");
            var fixedConditionDates = d.CONDITION_DATES.substring(1, d.CONDITION_DATES.length-1).split(", ");
            d.PATIENT_ID = d.PATIENT_ID;
            d.CLINICAL_START_DATE = convertClinicalDates(d.CLINICAL_START_DATE);
            d.CLINICAL_END_DATE = convertClinicalDates(d.CLINICAL_END_DATE);
            d.DRUG_START_DATES = convertDateArrays(fixedStartDates);
            d.DRUG_END_DATES = convertDateArrays(fixedEndDates);
            d.DRUG_DATE_INTERVAL = dayInterval(d.DRUG_START_DATES, d.DRUG_END_DATES);
            d.CONDITION_DATES = convertDateArrays(fixedConditionDates);
            console.log(d.DRUG_DATE_INTERVAL);
        })

        //Create the SVG Viewport selection
    var svgContainer = d3.select("body").append("svg")
                                  .attr("width", w)
                                  .attr("height", h);
    var xScale = d3.scale.linear()
                      .domain([-2350, 2350])
                      .range([0, w]);
    var yScale = d3.scale.linear()
                       .domain([28000, 10000000])
                       .range([0, h]);
    var xAxis = d3.svg.axis()
              .scale(xScale)
              .orient("bottom");
    var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left");

    var xAxisGroup = svgContainer.append("g")
                        .attr("class", "axis")
                        .attr("transform", "translate (0, 450)")
                        .call(xAxis);
    var yAxisGroup = svgContainer.append("g")
                        .attr("class", "axis")
                        .attr("transform", "translate(300, 0)")
                        .call(yAxis);

    d3.select("svg").selectAll("rect")
        .data(data)
        .enter()
        .append("rect")
        .attr("x", function(d) {return d.DRUG_START_DATES})
        .attr("y", function(d) {return d.PATIENT_ID})
        .attr("height", 15)
        .attr("width", function (d) {return d.DRUG_DATE_INTERVAL})
        .style("stroke", "black")
        .style("stroke-width", 1)   
    })

    function convertClinicalDates(date) {
        var baseDate = parser.parse("2000-01-01");
        var parsedDate = parser.parse(date);
        return Math.round((parsedDate - baseDate)/86400000);
    }

    function convertDateArrays(dates) {
        var newArr = [];
        var baseDate = parser.parse("2000-01-01");
        for(var i = 0; i < dates.length; i++) {
            var newDate = parser.parse(dates[i]);
            newArr.push(Math.round((newDate - baseDate)/86400000));
        }
        return newArr;
    }

    function dayInterval(startDateArr, endDateArr) {
        var newArr = [];

        for (var i = 0; i < startDateArr.length; i++) {
            var diff = endDateArr[i] - startDateArr[i] + 1;
            newArr.push(diff);
        }
        return newArr;
    }

</script>
<div>
<h3>A simple timeline</h3>
<div id="timeline1"></div>
</body>

</html>

提前谢谢！

D3js使矩形表示时间间隔

0 个答案: