d3:如何在if条件下为圆添加边框?

时间:2018-07-04 08:20:39

标签: javascript d3.js

我正在向我的d3图形添加一些圆圈,如下所示:

 this.node = this.svg.append('g')
    .attr('class', 'nodes')
  .selectAll('circle')
  .data(graph.nodes)
  .enter().append('circle')
    .attr('r', 5)
    .attr('fill', (d) => { return this.color(d.group); })
    .on('click', this.mouseclick)
    .call(d3.drag()
        .on('start', this.dragstarted)
        .on('drag', this.dragged)
        .on('end', this.dragended));

就像上面使用的d.group一样,我在数据中出现了d.errortrue。如果false,如何在添加(或以后添加)同一节点时显示红色边框?

1 个答案:

答案 0 :(得分:3)

您可以在此 <xsl:variable name="receipts" as="element(receipt)*"> <!-- Process each row in the CSV file, skip row 1 which contains the column headers --> <xsl:for-each select="$rows[position() !=1]"> <!-- Split each row into a comma separated list of columns --> <xsl:variable name="cols" select="tokenize(., ',')" /> <!-- Create the child receipt node and populate the attributes --> <receipt> <xsl:attribute name="account_code" select="'12345678'" /> <xsl:attribute name="amount" select="$cols[12]"/> </receipt> </xsl:for-each> </xsl:variable> <IMPORT_HEADER record_count="{count($receipts)}" record_total="sum($receipts/@amount)}"> <xsl:copy-of select="$receipts"/> </IMPORT_HEADER> 上使用条件,并在d.errortransparent上应用stroke false,否则:

red

使用.style("stroke", d => d.error ? "red" : "transparent") 代替undefined也可以解决问题:

transparent

这是一个演示:

.style("stroke", d => d.error ? "red" : undefined)
// which can also be written:
.style("stroke", d => { if (d.error) return  "red" })
d3.select("svg").attr("width", 500).attr("height", 500)
  .selectAll("circle")
  .data([{ x: 85, y: 80, r: 35, error: true }, { x: 265, y: 124, r: 45, error: false }])
  .enter().append("circle")
    .attr("transform", d => "translate(" + d.x + "," + d.y + ")")
    .attr("r", d => d.r)
    .style("fill", "blue")
    .style("stroke", d => d.error ? "red" : "transparent");