我正在向我的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.error
或true
。如果false
,如何在添加(或以后添加)同一节点时显示红色边框?
答案 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.error
和transparent
上应用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");